vue2+ElementUI+NodeJs(Express)实战小小项目，后台管理界面

ya0017230

已于 2022-04-13 18:14:51 修改

阅读量2k

点赞数 1

分类专栏： web相关文章标签： vue express mysql

于 2022-04-11 05:45:00 首次发布

本文链接：https://blog.csdn.net/ya0017230/article/details/124080544

版权

web相关专栏收录该内容

1 篇文章 0 订阅

订阅专栏

提示：up全站之巅真是好阿婆，做的一样，只是我的数据库用mysql实现的

文章目录

前言
一、搭建环境、安装包
二、CV工程师（>_<）
总结
现存BUG
其他（推荐）

前言

前端：vue2+elementUI
后端：express+mysql
可以跟着b站up敲，仅记录最终代码和踩过的坑。
视频链接：https://www.bilibili.com/video/BV1t441187pL?share_source=copy_web

一、搭建环境、安装包

vue2搭配 vuex3，安装vue-router、 express、cors（解决跨域）、axios
前端文件夹下：

npm i vuex@3 
vue create element-admin  //选router，其他一路下去
cd element-admin
npm init
vue add element   //我在这里使用element时候报了个缺css的错误，之后自建element.js（下文见）引入css就不报错了

后端文件夹下

npm i express@next cors  axios //因为后端比较简单，就把前后端代码写一起了，在server文件夹下

安装mysql并配置密码
官网下载社区版zip包，添加/更改ini文件，启动mysql并修改文件
比较靠谱的几个文章供参考：
Mysql8.0.22安装配置步骤
 另一篇靠谱教程
我Navicat没登陆也可以用，不知道能用多久，菜菜求抱 (T_T），各位珍重

二、CV工程师（>_<）

1.引入elementUI组件

App.vue代码如下：

<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    
    <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-notebook-1"></i>内容管理
          </template>
          <el-menu-item index="/article/create">新建文章</el-menu-item>
          <el-menu-item index="/article/index">文章列表</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <span>王小虎</span>
      </el-header>
      
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
  
</template>
<style>
  html,body{
    padding: 0;
    margin: 0;
  }
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>

<script>
  export default {
    data() {
     
      return {
        article:[]
      }
    }
  };
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import './plugins/element.js'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false

Vue.prototype.$http=axios.create({
  baseURL:'http://localhost:3001/api',
})

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

plugins文件夹下element.js

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

2.创建组件

views文件夹下，
CreateArticle.vue

<template>
    <el-form @submit.native.prevent="saveArticle" ref="form" :model="article" label-width="80px">
        <el-form-item label="文章标题">
          <el-input v-model="article.title"></el-input>
        </el-form-item>

        <el-form-item label="文章内容">
          <el-input type="textarea" v-model="article.body"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
</template>


  <script>
    export default {
        name:'createArticle',
        data() {
            return {
                article:{},
            }
        },
        methods: {
            saveArticle(){
              this.$http.post('article',this.article).then(()=>{
                //  console.log(res.data)
                this.$message({
                    message: '恭喜你，文章创建完成',
                    type: 'success'
                  });
                })
                this.$router.push('/article/index')
               //有bug，添加文章之后，跳转回到文章列表，最新的还没加上去
               //博主用的mogodb后端接口用了await，看看mysql有没有相似的解决方法
            }
        }
    }
  </script>

ListArticle.vue

<template>
    <div >
        <el-table :data="articles">
            <el-table-column prop="title" label="标题" width="140">
            </el-table-column>
            <el-table-column prop="body" label="内容" width="220">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <!-- "scope"表示当前这一行 -->
              <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>

          </el-table>
    </div>
</template>

<script>

export default {
    name: 'ListArticle',
    data() {
      return {
        articles:[]
      }
    },
methods: {
      fetch(){
        this.$http.get('article').then(res=>{
          this.articles=res.data
          // console.log(res.data)
        })
      },
      edit(row){
        // this.$router.push(`${row.id}/edit`) 意外发现这种也行
        this.$router.push(`/article/${row.id}/edit`)
      },
      remove(row){
        // console.log(row.title)
        this.$http.delete(`/article/${row.id}`).then(()=>{
            this.$message({
                    message: '恭喜你，删除成功',
                    type: 'success'
            });
            this.fetch()
        })
      }
    },
    created(){
      this.fetch()
    }
  };
</script>

<style scoped>

</style>

EditArticle.vue

<template>
    <el-form @submit.native.prevent="saveArticle" ref="form" :model="article" label-width="80px">
        <el-form-item label="文章标题">
          <el-input v-model="article.title"></el-input>
        </el-form-item>

        <el-form-item label="文章内容">
          <el-input type="textarea" v-model="article.body"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
</template>
  <script>
    export default {
        name:'editArticle',
        data() {
            return {
                article:{}
            }
        },
                methods: {
            fetch(){
                this.$http.get(`article/${this.$route.params.id}`).then(res=>{
                this.article=res.data[0] 
                  // console.log('edit,fetch',this.article,res.data,this.$route.params.title)
              })
            },
            saveArticle(){
               this.$http.put(`article/${this.$route.params.id}`,this.article).then(()=>{
                this.$message({
                    message: '恭喜你，文章更新成功',
                    type: 'success'
                  });
                  this.$router.push('/article/index') 
                })  
            },
        },
        created(){
            this.fetch()
        }
    }
  </script>

3.设置路由

./router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import ListArticle from '../views/ListArticle'
import CreateArticle from '../views/CreateArticle'
import EditArticle from '../views/EditArticle'
Vue.use(Router)


export default new Router({
    // mode: 'history',
    routes:[
        {
            path:'/',
            name:'home',
            redirect:'/article/index'
        },
        {
            path:'/article/create',
            name:'create-article',
            component: CreateArticle,

        },
        {
            path:'/article/index',
            name:'list-article',
            component: ListArticle,

        },
        {
            path:'/article/:id/edit',
            name:'edit-article',
            component: EditArticle,
        }

    ]
})

4.编写后端逻辑(这里和up不同，用的是Mysql)

server文件夹下index.js（因为这里后端代码比较简单，所以和前端就写在同一个目录下了）

const express=require('express')
// const mysql = require("mysql");
const db2=require('./db') 

const app =express()

app.get('/', async (req,res)=>{
    res.send('index')
})
app.use(express.json())
app.use(require('cors')())  //跨域

/* var db = mysql.createConnection({
    host: 'localhost', //数据库地址
    port: '3306',//端口号
    user: 'root',//用户名
    password: '123456',//密码
    database: 'article'//数据库名称
}); 
db.connect()*/

//新增文章
app.post('/api/article',async(req,res)=>{
    // console.log(req.body)
    data=req.body
    // db.connect();//用参数与数据库进行连接
    var insert = `INSERT INTO article (title,body )VALUES('${data.title}','${data.body}');`
    // console.log(insert)
    db2(insert, function(err, result) { //连接数据库 传入sql语句 回调函数得到结果
        try {
            console.log('插入成功')    
            res.send(JSON.stringify(result))
        } catch (err) {
            console.log("查询失败",err);
        } 

    });
} )
//展示文章
//地址一样，启动方法不一样，也算不一样
app.get('/api/article',async(req,res)=>{
    sql= 'SELECT * FROM article';
    db2(sql,(err,result)=>{
        if(err){
            console.log("查询失败",err);
        }else{
            // console.log(result)
           
            res.send(result)
        }
    }) 
})

//删除某篇文章
app.delete('/api/article/:id',async(req,res)=>{
    id=req.params.id
    console.log('delete id',id)
    dltsql='DELETE FROM article WHERE id="'+id+'"'
    db2(dltsql,(err,result)=>{
        if(err){
            console.log("查询失败",err);
        }else{
            res.send({
                status:true
            })
        }
    })
})
//某篇文章的详情
app.get('/api/article/:id',async(req,res)=>{
    sql= 'SELECT * FROM article where id="'+req.params.id+'"';
    db2(sql,(err,result)=>{
        if(err){
            console.log("查询失败",err);
        }else{
            // console.log(result)           
            res.send(result)
        }
    }) 
})
//更新表
app.put('/api/article/:id',async(req,res)=>{
    // console.log('req.body',req.body,'\nreq.params:',req.params)
    sql= "update article set title='"+req.body.title+"',body='"+req.body.body+"' where id='"+req.params.id+"';";
    db2(sql,(err,result)=>{
        if(err){
            console.log("更新失败",err);
        }else{       
            res.send(result)
        }
    }) 
})


app.listen(3001, ()=>{
    console.log('http://localhost:3001')
})
app.listen(3001, ()=>{
    console.log('http://localhost:3001')
})

数据库配置：db.js和dbcfg.json
数据库连接池（写的并不完善，只是发现在每个请求中链接、关闭会出问题，百度了一段代码，仅能用而已）
db.js:

//导入所需模块  
var mysql=require("mysql");    
//导入配置文件  
var cfg  =require("./dbcfg");  
var pool = mysql.createPool({    
    host:      cfg.host,  
    user:      cfg.user,   
    password:  cfg.password,    
    database:  cfg.dbname ,   
    port:      cfg.port  
});    
//导出查询相关  
var query=function(sql,callback){    
    pool.getConnection(function(err,conn){    
        if(err){    
            callback(err,null,null);    
        }else{    
            conn.query(sql,function(qerr,vals,fields){    
                //释放连接    
                conn.release();    
                //事件驱动回调    
                callback(qerr,vals,fields);    
            });    
        }    
    });    
};    

module.exports=query;

dbcfg.json

{
    "host": "localhost",
    "port": 3306,
    "user": "root",
    "password": "你自己的密码",
    "dbname": "article",
    "maxConnLimit": 60
}

数据库中的article表结构

好啦，如果你已经在mysql中建好表、安装好nodemon的话，开启两个终端，
终端1执行：（element-admin文件夹下）

npm run serve

终端2执行：

nodemon  server

开启第一个全栈小玩意儿吧！

nodemon插件：
自动寻找server入口代码、更改后自动更新服务器代码，省的重启

总结

以上是按照文件写的，免得宝们下载资源了，这里对前后端开发步骤进行总结：
大致思路：前端组件通过绑定函数，在函数中调用axios接口，（即前端发起http请求）
后端服务器响应对应路由的函数，完成数据处理（后端按需访问数据库返回查询/执行结果）

服务器（server/index.js：执行相关路径的具体数据处理
组件:发起请求、处理服务器返回的数据、页面跳转
前端路由(router/index.js)：

安装包，main.js中引入并配置包、组件
axios ：nodejs特有，前后端用一个包
新建组件（参考elementUI的样式）
路由文件中(/route/index）配置路由规则（见router/index.js）
组件间的跳转（我只写了这次用到的两种，才疏学浅，不知道一共有多少种）
仅前端：
方式一：
Vue文件中指定组件和配置对应路径，指定组件展示区域+组件
“指定组件和配置对应路径 ”对应代码：
App.vue中：

   <el-menu-item index="/article/create">新建文章</el-menu-item>
   <el-menu-item index="/article/index">文章列表</el-menu-item>

指定组件位置对应代码：

       <router-view></router-view>

方式二：
执行完http请求后直接跳转到页面（router+模板字符串跳转到其他路由）

this.$router.push('/article/index')

tip：这段代码在*this.$http().then{}*中

实现组件功能（前后端配合）
ListArticle.vue为例：
list组件展示文章列表，每一项右侧有“编辑、删除”两个按钮，路径指定是通过按钮绑定函数，在函数中调用axios接口配合后端服务器实现的，在后端服务器（server/index.js中）实现访问数据库和结果返回，前端http.then()处理返回结果。

现存BUG

1.(解决)express+mysql数据库还没整明白，像insert,update这种数据库执行返回值不是期待的值，然后又跳回文章列表时候会有数据更新延迟，得再刷新一下才能看到最新列表（惭愧），不晓得是不是数据库连接池那块没搞明白。

async fetch() {}

2.(解决)添加文章成功后自动跳转到文章列表页面，但是左侧栏高亮还是停留再“新建文章”那栏
el-menu那栏，属性绑定

:default-activate="$route.path"

都是后台看到的解决方法，没在代码中加，读者要自己加一下或者采用其他解决办法。（懒）

其他（推荐）

照着尚硅谷的视频（推荐）学到vue2，讲的蛮好，但是我想先练手在接着vue3.
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=38&share_source=copy_web
最近听的歌，就是敲代码时候脑子会飘歌词的那种：《我用什么把你留住》floruitsShow

ya0017230

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
vue2+ElementUI+NodeJs(Express)实战小小项目，后台管理界面

提示：up全站之巅真是好阿婆，做的一样，只是我的数据库用mysql实现的文章目录前言一、搭建环境、安装包二、使用步骤1.引入库2.读入数据总结前言前端：vue2+elementUI后端：express+mysql可以跟着b站up敲，仅记录最终代码和踩过的坑。视频链接：https://www.bilibili.com/video/BV1t441187pL?share_source=copy_web一、搭建环境、安装包vue2搭配 vuex3，安装vue-router、 express、.
复制链接

扫一扫