vue项目前后端实现

前端：vue，vue-router，axios，vue-video-player，element-ui

后端： express ，mysql

环境：macos

工具：Sequel Pro（mysql可视化工具）

项目比较简单，主要是从后端拿数据进行渲染。

顺利把vue项目前后端的流程实现了一遍。

首先上一个项目的目录结构：

主要的文件夹有：

src：存放前端代码

dist：存放打包后的前端代码

server：存放node后端代码

其他的文件夹和文件是vue-cli工具生成的。

关于Vue的知识在此不细说啦，其他文章已经很详细啦。

前端代码部分

src文件夹的结构：

• api文件夹用来存放请求

  export function getAllCameras () {  return new Promise((resolve, reject) => {    axios.get('http://127.0.0.1:3000/cameras').then((res) => {      resolve(res)    })  })}复制代码

• assets文件夹用来存放静态文件，主要是img
• components文件夹存放组件
• layout文件夹存放布局组件
• pages文件夹用来存放页面
• router文件用来存放路由处理，这里用的是vue-router
• util文件夹存放的是公共的工具，也就是封装好的函数工具。
• App.vue是全局的vue文件，也就是但页面应用的index.html的vue文件
• main.js对应App.vue

单页面应用其实是在一个页面里进行的，组件在router-view里根据路由变化而变化。

npm安装element-ui和axios后，引入到main.js文件里

import Vue from 'vue'import App from './App'import router from './router'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
new Vue({  el: '#app',  router,  components: { App },  template: '<App/>'})
复制代码

这里element-ui可以依照官网按需引用。

然后就可以愉快的写代码啦！

由于需要用m3u8格式的直播视频。所以用了方便好用的vue-video-player组件。这个组件在github上开源。

写完前端代码后，就要开始写后端代码啦。

不用新开一个文件夹，只用在根目录下新建一个server文件夹，用来存放后端的代码。

注意：是根目录不是src目录

根据顺序我把代码贴一下

api/api.js

let models = require('../db')let express = require('express')let router = express.Router()let mysql = require('mysql')let $sql = require('../sqlMap')
var connection = mysql.createConnection(models.mysql)
connection.connect()
let jsonWrite = function(res, d) {   if(typeof d === 'undefined') {      res.json({          code: '1',          msg: '操作失败'      });  } else {    res.json(d)  }}
router.get('/cameras', (req, res) => {  res.header('Access-Control-Allow-Origin', '*') // 这里是跨域的处理  let sql = $sql.getAllCameras  connection.query(sql, function (err, d) {    if (err) {      console.error(err)      return    }    res.send(d)  })})
module.exports = router复制代码

上面的代码是一个结构，只写了一个路由'/cameras'

db.js

module.exports = {  mysql: {    host: 'localhost',    user: 'root',    password: 'focus',    database: 'rivermonitor'  }}复制代码

这里进行了数据库的连接

index.js

const Api = require('./api/api.js')const fs = require('fs')const path = require('path')const bodyParse = require('body-parser')const express = require('express')const app = express()
app.use(bodyParse.json())app.use(bodyParse.urlencoded({extended: false}))
app.use('/', Api)
app.listen(3000)console.log('success listen at port 3000')复制代码

这个文件是后端服务的入口文件

sqlMap.js

let sqlMap = {  getAllCameras: 'select * from cameras'}
module.exports = sqlMap复制代码

这个文件是存放操作数据库语句的文件，这里给的是个例子。

写完前端和后端后，就可以分别开启服务。

前端：npm run dev

后端进入server文件夹下 node index

 这样在8080端口和3000端口各开了一个服务

打开浏览器http://127.0.0.1:8080可以看见前端的效果

现在如果前端发请求会报错，因为我们还要解决跨域问题。

打开config文件下的index.js

module.exports = {  dev: {
    // Paths    assetsSubDirectory: 'static',    assetsPublicPath: '/',    proxyTable: {      '/': {        dev: {          env: require('./dev.env'),          port: 8080,          autoOpenBrowser: true,          assetsSubDirectory: 'static',          assetsPublicPath: '/',          proxyTable: {                      '/api': {                target: 'http://127.0.0.1:3000',                changeOrigin: true,                pathRewrite: {                                    '^/': ''                }              }          },          cssSourceMap: false        }      }    }
}复制代码

上面proxyTable是主要配置，现在可以代理3000端口的请求啦。

然后用mac上的数据库工具Sequel Pro建立数据库和数据表

mysql下载 npm install mysql

这样一个前后端配合的项目的流程就完了。剩下的就是部署到服务器上啦。

写这篇文章主要是给有vue基础的同学合并前后端项目的思路，没有讲述工具的使用和技术栈的概念，希望能给大家带来帮助，有细节的提问可以在下面评论。

转载于:https://juejin.im/post/5aabf86351882555867f2efe