前端: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
这样一个前后端配合的项目的流程就完了。剩下的就是部署到服务器上啦。