express + vue 搭建项目

创建目录

  • 为了方便管理项目,创建根目录,内部分成两部分,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 文件是整个项目的入口文件

express + vue 搭建项目_第1张图片

  • 安装依赖、启动项目
npm install
npm start
  • 默认访问 localhost:3000
  • 如果出现下面的内容,说明启动成功

express + vue 搭建项目_第2张图片

  • 初始化的脚手架中,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 说明脚手架搭建成功

express + vue 搭建项目_第3张图片

搭建 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 install
npm run serve

连接数据库

  • express 项目中新建文件夹 modules 用来存放模块化设置的文件
  • modules 文件夹中新建 handel.js 对数据进行处理的模块封装
// 引入mysql
var 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 搭建项目_第4张图片

完整案例

express + vue 搭建项目,完成数据的增删改查 -testsql

你可能感兴趣的