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

红太狼 2022-11-14 14:38 278阅读 0赞

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

## 准备工作 ##

1、[Element-UI 官网][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、开始自己写页面，开发项目

![image-20210325214912745][]

![image-20210325215213940][]

## 配置路由 ##

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

![image-20210327123142204][]

## mongoose ##

**1、[官网 如下图点击下载][Link 1]**

![image-20210327114459622][]

**2、[Mac OSX 平台安装 MongoDB][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
    > 
    启动成功！！！

![image-20210327121422448][]

## 本地开启 ##

1、`cd /usr/local/mongodb/bin`

2、`sudo ./mongod -dbpath /usr/local/mongodb/data/db`

3、`./mongo`

4、npm run dev

5、nodemon server

## 实际页面 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE0ODcyOQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE0ODcyOQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE0ODcyOQ_size_16_color_FFFFFF_t_70 2]

[Element-UI]: https://element.eleme.cn/#/zh-CN
[image-20210325214912745]: /images/20221022/2faeb60cf1074d58821db0ec45d507d5.png
[image-20210325215213940]: /images/20221022/ff39621310bc4a0e844b6d0298e2798d.png
[image-20210327123142204]: /images/20221022/a6ac9c2aaa52408596b7ebef0215b4dd.png
[Link 1]: https://www.mongodb.com/try/download/community
[image-20210327114459622]: /images/20221022/8632ad4ce4eb493eaa3c1dc3f9f8f6ad.png
[Mac OSX _ MongoDB]: https://www.runoob.com/mongodb/mongodb-osx-install.html
[image-20210327121422448]: /images/20221022/18acb281da9a43adbec25f8f10539e75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE0ODcyOQ_size_16_color_FFFFFF_t_70]: /images/20221022/cce23e5da0d5405ebdf563ca9cf39d3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE0ODcyOQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/c94b6ac0d24c4a95ab69b8659ef05ff1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE0ODcyOQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/cdc0d029b34743bd99f5e01cd742446e.png