Element UI + NodeJs(Express)全栈开发后台管理界面
准备工作
1、Element-UI 官网
2、创建项目
1、vue create element-admin
2、选择Manually select features
3、后面一般是默认第一个配置或者回车就行
4、最后安装成功
5、vue add element
6、选择Fully import
7、npm run serve > App running at: - Local http://localhost:8081/
8、显示页面 > 即可成功
9、开始自己写页面，开发项目
配置路由
1、router > index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import ListArticle from '../views/ListArticle.vue'
import CreateArticle from '../views/CreateArticle.vue'
import EditArticle from '../views/EditArticle.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
redirect:'/articles/index'
},
{
path: '/articles/index',
name: 'list-article ',
component: ListArticle
},
{
path: '/articles/create',
name: 'create-article ',
component: CreateArticle
},
{
path: '/articles/:id/edit',
name: 'edit-article',
component: EditArticle
}
]
const router = new VueRouter({
routes
})
export default router
2、main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
Vue.config.productionTip = false
import axios from 'axios'
Vue.prototype.$http=axios.create({
baseURL:'http://localhost:3001/api'
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
3、App.vue
<!-- 左边 -->
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu router :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-tickets"></i> 内容管理</template>
<el-menu-item index="/articles/index">文章列表</el-menu-item>
<el-menu-item index="/articles/create">新建文章</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- 左边 -->
<el-main>
<router-view></router-view>
</el-main>
server
1、安装框架
npm i express@next mongoose cors
2、编写index.js
3、启动
nodemon server
4、安装 mongoose
5、ajax请求库
npm i axios
6、解决某一步报错
原因是没有安装本地mongoose数据库，只是安装了项目依赖的mongoose
mongoose_138">mongoose
1、官网 如下图点击下载
2、Mac OSX 平台安装 MongoDB
3、接下来我们使用 curl 命令来下载安装：
# 进入 /usr/local
cd /usr/local
# 下载
sudo curl -O https://fastdl.mongodb.org/osx/mongodb-osx-ssl-x86_64-4.0.9.tgz
# 解压
sudo tar -zxvf mongodb-osx-ssl-x86_64-4.0.9.tgz
# 重命名为 mongodb 目录
sudo mv mongodb-osx-x86_64-4.0.9/ mongodb
安装完成后，我们可以把 MongoDB 的二进制命令文件目录（安装目录/bin）添加到 PATH 路径中：
export PATH=/usr/local/mongodb/bin:$PATH
创建日志及数据存放的目录：
-
数据存放路径：
sudo mkdir -p /usr/local/var/mongodb -
日志文件路径：
sudo mkdir -p /usr/local/var/log/mongodb
接下来要确保当前用户对以上两个目录有读写的权限：
sudo chown runoob /usr/local/var/mongodb
sudo chown runoob /usr/local/var/log/mongodb
以上 runoob 是我电脑上对用户，你这边需要根据你当前对用户名来修改。
接下来我们使用以下命令在后台启动 mongodb：
mongod --dbpath /usr/local/var/mongodb --logpath /usr/local/var/log/mongodb/mongo.log --fork
- –dbpath 设置数据存放目录
- –logpath 设置日志存放目录
- –fork 在后台运行
如果不想在后端运行，而是在控制台上查看运行过程可以直接设置配置文件启动：
mongod --config /usr/local/etc/mongod.conf
查看 mongod 服务是否启动：
ps aux | grep -v grep | grep mongod
使用以上命令如果看到有 mongod 的记录表示运行成功。
4、启动后我们可以使用 mongo 命令打开一个终端：
$ cd /usr/local/mongodb/bin
$ ./mongo
MongoDB shell version v4.0.9
connecting to: mongodb://127.0.0.1:27017/?gssapiServiceName=mongodb
Implicit session: session { "id" : UUID("3c12bf4f-695c-48b2-b160-8420110ccdcf") }
MongoDB server version: 4.0.9
……
> 1 + 1
2
>
5、发现第四步报错、输入mongo，报如下错误：
root@instance-tbbjrcnc:/# mongo
MongoDB shell version v4.0.12
connecting to: mongodb://127.0.0.1:27017/?gssapiServiceName=mongodb
2019-08-12T10:40:58.930+0800 E QUERY [js] Error: couldn't connect to server 127.0.0.1:27017, connection attempt failed: SocketException: Error connecting to 127.0.0.1:27017 :: caused by :: Connection refused :
connect@src/mongo/shell/mongo.js:344:17
@(connect):2:6
exception: connect failed
原因是mongo没有启动
解决方式：
1、cd /usr/local/mongodb/bin
创建目录 /data/db
就是在bin的同级目录创建data文件夹，data文件夹里面在创建db文件夹
2、sudo ./mongod -dbpath /data/db/
sudo ./mongod -dbpath /usr/local/mongodb/data/db
然后db文件夹会出现很多文件，表示成功，不要关闭终端！
3、新建一个终端
$ cd /usr/local/mongodb/bin
$ ./mongo
Welcome to the MongoDB shell.
····
---
> 1+1
2
>
启动成功！！！
本地开启
1、cd /usr/local/mongodb/bin
2、sudo ./mongod -dbpath /usr/local/mongodb/data/db
3、./mongo
4、npm run dev
5、nodemon server
实际页面
