创立目录

  • 为了方便管理我的项目，创立根目录，外部分成两局部，server 和 view
  • server 用来搭建 express 框架
  • view 用来搭建 vue 框架

搭建 express 框架

  • 全局装置 express 脚手架，并检测是否装置胜利
npm install express-generator -g
  • 检测是否装置胜利
express --version
  • 在 server 文件夹中创立 express 我的项目
express 项目名称

  • 目录构造

    • bin 目录下的 www 文件用来启动我的项目
    • public 目录用来寄存动态文件
    • router 目录用来寄存路由文件，对应资源和引入门路的问题
    • view 目录用来寄存模板引擎文件
    • app.js 文件是整个我的项目的入口文件

  • 装置依赖、启动我的项目
npm installnpm start
  • 默认拜访 localhost:3000
  • 如果呈现上面的内容，阐明启动胜利

  • 初始化的脚手架中，router 目录下存在 user.js，用来退出本人的接口内容
router.get('/', function(req, res, next) {  res.send('respond with a resource');});
  • 在根目录 app.js 中，无关 user.js 的配置为
var usersRouter = require('./routes/users');app.use('/users', usersRouter);
  • 此时在浏览器中拜访路由 users，如果呈现 respond with a resource 阐明脚手架搭建胜利

搭建 vue 框架

  • 全局装置脚手架
npm install -g @vue/cli
  • 检测是否装置胜利
vue -V
  • 在 view 文件夹中创立 vue 我的项目
vue create 项目名称

  • 目录构造

    • assess 目录用来寄存动态文件
    • components 目录用来寄存公共组件
    • App.vue 根组件
    • main.js 我的项目入口

  • 设置跨域

    • express 我的项目默认在 3000 端口启动，所以视图层的 vue 框架中须要设置跨域
 devServer: {    host: 'localhost',    port: 8000,    proxy: {      '/api': {        target: 'http://localhost:3000',        changeOrigin: true,        pathRewrite: {          "/api": ""        }      }    },  },
  • 启动我的项目
npm installnpm run serve

连贯数据库

  • express 我的项目中新建文件夹 modules 用来寄存模块化设置的文件
  • modules 文件夹中新建 handel.js 对数据进行解决的模块封装
// 引入mysqlvar mysql = require('mysql')// 引入mysql连贯配置var connection = mysql.createConnection({  host: 'localhost',  user: 'root',  password: 'root',  database: 'testdata'});var userData = {  // 查问所有数据  queryAll: function (req, res, next) {    let queryAll = 'SELECT * FROM userdata'    connection.query(queryAll, function (err, result) {      if (result != '') {        res.json({          code: '200',          msg: '全副查找胜利',          data: result        })      } else {        res.json({          code: '1',          msg: '操作失败'        })      }    })  },}module.exports = userData
  • routes 文件夹中的 index.js 封装接口
var express = require('express');var router = express.Router();// 引入本人封装的连贯var user = require('../modules/handel')/* GET home page. */router.get('/', function (req, res, next) {  res.render('index', { title: 'Express' });});router.get('/queryAll', function (req, res, next) {  user.queryAll(req, res, next)})module.exports = router;

操作数据

  • 在 vue 中应用
axios  .get("/api/queryAll")  .then((res) => {    console.log("获取res", res);  })  .catch((err) => {    console.log("获取报错", err);  });
  • 如果能获取到数据，阐明在本地搭建的数据视图互通的接口调试胜利

残缺案例

express + vue 搭建我的项目，实现数据的增删改查 -testsql