Share the actual operation of private collection project nodejs backend + Vue + Mysql to build a management system

Once someone 2021-11-25 18:04:58
NodeJs Back end +Vue+MySQL Build a management system

Write it at the front , I've been using it differently before Java Write back end , Whether it's SpringBoot still MVC Or what , I can't do without that , Suddenly found that now the school is used again node Write backend , To learn !

One 、 First, the whole set Vue Off the shelf open source scaffolding program and start , As a front shelf

What I use here is ​ ​vue-manage-system​​, It's very easy to use. Thank you ! According to the... In the project Readme Start the project . Steps are as follows .

git clone https://github.com/lin-xin/vue-manage-system.git
  • 1.

# Share the actual operation of private items # nodejs Back end +vue+mysql Build a management system _sql

cd vue-manage-system
npm install
npm install express
npm install mysql
npm run dev
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

# Share the actual operation of private items # nodejs Back end +vue+mysql Build a management system _html_02

# Share the actual operation of private items # nodejs Back end +vue+mysql Build a management system _html_03# Share the actual operation of private items # nodejs Back end +vue+mysql Build a management system _sql_04

  • Note that if install An error occurs, like the following figure , Then delete ​​package-lock.json ​​ This file    

# Share the actual operation of private items # nodejs Back end +vue+mysql Build a management system _git_05

Two 、 Take this login interface as an example , Test interaction

  1. src Under the new server package

# Share the actual operation of private items # nodejs Back end +vue+mysql Build a management system _mysql_06

  1. newly build ​​mysqldb.js​​  Database connection utility class
// Database connection configuration
module.exports = {
mysql: {
host: '127.0.0.1',
user: 'root',
password: '123456',
database: 'nodejsserver',
port: '3306'
}
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  1. newly build ​​api.js​​  Interface class
var models = require('./mysqldb'); // Database link information
var express = require('express');
var router = express.Router();
var mysql = require('mysql');

// Connect to database
var conn = mysql.createConnection(models.mysql);
conn.connect();

// Test interface
router.post('/test', (req, res) => {
var params = req.body;
console.log(params)
res.send(" Back... Back !");
});

// Login user interface
router.post('/login', (req, res) => {
var sql = $sql.user.login;
var params = req.body;
var loginflag=false;
console.log("sql", sql);
console.log("params", params);
conn.query(sql, [params.username], function(err, result) {
if (err) {
console.log(err);
}
if (result) {
if(result.length===0){
console.log(" The query result is empty !");
res.send(ResultVo.FAIL(" Login failed "));
}else{
for (var i = 0; i < result.length; i++) {
console.log(" The request is successful :", result[i])
if (result[i].password == params.password) {
loginflag = true;
res.send(ResultVo.SUCCESS(" Landing successful "));
break;
}
}if(!loginflag){
res.send(ResultVo.FAIL(" Wrong account or password !"));
}
}
}else {
console.log(" The query fails !");
res.send(ResultVo.FAIL(" Login failed "));
}
})
});

module.exports = router;
  • 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.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  1. newly build ​​server.js​​  Back end main class
// node Back end servers
const userApi = require('./api');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// After the service is started, access the specified compiled dist The data in the file
app.use(express.static(path.resolve(__dirname, '../dist')))
app.get('*', function(req, res) {
const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8')
res.send(html)
})
// Back end api route
app.use('/api', userApi);
// Listening port
app.listen(8088);
console.log(' Back end project launch , Listening port 8088......');
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.

So far, a simple back-end has been built , The front and rear end separation is also started by the front and rear end separation

# Share the actual operation of private items # nodejs Back end +vue+mysql Build a management system _mysql_07

  1. The back-end start
cd src
cd server
node server.js
  • 1.
  • 2.
  • 3.

# Share the actual operation of private items # nodejs Back end +vue+mysql Build a management system _sql_08

  1. vue.config.js Open cross domain
productionSourceMap: false,
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8088/api/',
changeOrigin: true,
pathRewrite: {
'/api': ''
}
}
}
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  1. land login.vue Send a request
this.$axios.post('/api/login',this.param).then(res => {
if(res.data.code===0){
this.$message.success(' Login successful ');
localStorage.setItem('ms_username', this.param.username);
this.$router.push('/');
}else {
this.$message.error(res.data.msg);
}
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

# Share the actual operation of private items # nodejs Back end +vue+mysql Build a management system _mysql_09



Please bring the original link to reprint ,thank
Similar articles

2021-11-25

2021-11-25

2021-11-25

2021-11-25