node.js+elementUI+echarts前后端分离全栈项目

node.js+elementUI+echarts前后端分离全栈项目

为了更好的完成工作，博主近期一直在琢磨前端相关技术，作为一个只会谢谢Python小程序的半吊子程序员，因为没有团队，不得不走上全栈开发之路

博主前期的技术栈是Python Django后端+原生js以及jQuery这一套，但是感觉太小众了，于是一直在啃node.js和vue的相关技术，动手写了3个项目后，全部跟着B站UP写的，其中自己也改了一些内容，筚路蓝缕，总算入门，记录一下。

koa2+vue+echarts可视化项目

第一个全栈项目是后端koa2+前端VUE及echarts框架写的一个数据可视化界面，功能相对单一，没使用数据库，后端直接使用的json文件，但展示效果不错，效果如下：

还有一些动态的效果展示，虽然功能单一，但技术点非常庞杂。

项目我已经传到了码云

项目前端地址：https://gitee.com/hgandzl/vue-projects-vision

项目后端地址：https://gitee.com/hgandzl/vision-backend-koa2

express+vue+element后台管理系统

第二个全栈项目是后端express+前端vue及elementUI写的一个后台管理系统，B站UP用的的MongoDB数据库，我接受不了，自己改了一下接口，使用的mysql，界面如下：

这个项目虽然界面不是那么好看，但技术栈却非常复杂，有繁杂的登录验证（token验证）系统，数据的增删改查系统，还有不同账户的用户权限，vuex的使用，等等，总体来说，很难，学习到的知识也非常多。

项目前端地址：https://gitee.com/hgandzl/vue-back-stage-management

后端项目暂不上传了

express+elementUI前后端分离小项目

在写完这两个项目后，博主自己动手写了一个数据管理系统，去掉了登录注册这些功能，也没有增删改查，就保留了路由请求post、get和简单的一些界面。也就是最容易上手的项目，技术栈node.js(mysql/express/cors)后端及vue前端（elementUI）

vue项目创建

终端命令

vue create element-admin

选择手动，并加入路由Router，这样就不用在额外npm router了

添加vue

切换到前端项目目录，终端命令 vue add element，这样就不用再额外的引入elementui了

全部引入，不按需引入

前端项目地址：https://gitee.com/hgandzl/element-admin

后端不上传了，看一下后端入口文件（app.js）的配置：

const express = require("express");
const cors = require("cors");
const bodyParser = require('body-parser');

const app = express();
app.use(cors())
app.use(express.urlencoded({extended: false}))
app.use(bodyParser.json())

const articlesRouter = require('./router/article')
app.use('/api', articlesRouter)

app.listen(3001, () => {
  console.log("api server running at http://127.0.0.1:3001");
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

几个关键点：

1. 跨域设置

2. 解析json数据设置，下面这两行代码很重要，不然数据老是传不到数据库里面去

   app.use(express.urlencoded({extended: false}))
   app.use(bodyParser.json())
   1
   2

然后看一下路由文件route.js：

const express = require('express')
const articlesHandler = require('../router_handler/article')

const router = express.Router()

router.get('/articles/index', articlesHandler.articleIndex)

router.post('/articles/create', articlesHandler.articleCreate)

module.exports = router
1
2
3
4
5
6
7
8
9
10

可以看出来，很简单的两个路由，一个是添加，一个是查看，使用模块化设计，路由处理函数写在另外一个文件router_handler.js中，如下：

const db = require('../db/index')

exports.articleIndex = (req, res) => {
    const sql = 'select * from articles'
    db.query(sql, (err, results) => {
        if (err) return res.json(err)
        if(results.length == 0) return res.json('数据库中暂无内容')
        res.json(results)
    })
    // res.json('index ok')
}

exports.articleCreate = (req, res) => {
    // console.log(req)
    const article = {}
    if (req.body.title) article.title = req.body.title
    if (req.body.content) article.content = req.body.content
    // console.log(article)
    const sql = 'insert into articles set ?'
    db.query(sql, article, (err, results) => {
        if (err) return res.json(err)
        if(results.affectedRows !== 1) return res.json({status: 0, message: '创建文章失败'})
        res.json(article)
    })
    // res.json('add ok')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

数据库配置…/db/index：

const mysql = require('mysql');

const db = mysql.createPool({
    host: '127.0.0.1',
    user: 'root',
    password: 'xxxxx',
    database: 'xxxx'
})

module.exports = db
1
2
3
4
5
6
7
8
9
10