Element UI + NodeJs(Express) 全栈开发后台管理界面+项目1

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

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

实际页面