vue+node(express)做中间层开发一

前提条件安装:

  • vue v2.9.6
  • vue-cli
  • iview
  • node v15.4
  • express v4.16.1
  • axios v0.18.0
  • cors

采用的结构为前端Vue项目,内包一个node服务
Screen Shot 2020-12-19 at 09.30.41.png

vue端

vue init webpack vueapp //新建一个vueapp项目,采用默认配置即可

执行 npm run dev启动vue

$ npm run dev

> vueapp@1.0.0 dev /Users/mac/dongzhiqin/vueapp
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 32/37 modules 5 active ...ers/mac/dongzhiqin/vueapp/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting                                                       i
 DONE  Compiled successfully in 4924ms                      6:48:54 PM

 I  Your application is running here: http://localhost:8080

引入iview和axios,在main.js文件中编辑

import axios from 'axios'
import ViewUI from 'view-design'
import 'view-design/dist/styles/iview.css'
Vue.prototype.$axios = axios // 把axios注册为原型属性
Vue.use(ViewUI)

编辑helloworld.vue文件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button type="button" name="button" v-on:click="getmsg">send</button>
    <button type="button" name="button" v-on:click="postmsg">send</button>
    <Button>Default</Button>
    <Button type="primary">Primary</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="text">Text</Button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    getmsg () {
      this.$axios.get('/api/request?dong=123').then(function (res) {
        console.log('res=', res)
      })
    },
    postmsg () {
      this.$axios.post('/api/postrequest', {name: '123'}).then(function (res) {
        console.log('post res = ', res)
      })
    }
  }
}
</script>

此时用到了iview组件button,并且设置了两个数据调用的方法,界面如下图
Screen Shot 2020-12-19 at 10.16.20.png

node端

安装npm install -g express-generator@4
在vueapp下新建server文件夹,切换到server文件夹,执行express node_api && cd node_api ,会新建一个node_api的项目,然后安装依赖npm install

执行npm start启动express

$ npm start

> node-api@0.0.0 start /Users/mac/dongzhiqin/vueapp/server/node_api
> node ./bin/www

在页面server/node_api/routes/index.js配置路由

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.get('/hi', function(req, res, next) {
  req.name = 'kim';
  next();
})

router.get('/hi', function(req,res) {
  res.send(`hello ${req.name}`)
})

router.get('/request', function(req,res,next){
  res.send(req.query)
})

router.post('/postrequest', function(req, res, next){
  res.send(req.body)
})

router.get('/user', function(req, res, next) {
  console.log('req: ',req)
  res.send({
    name: 'kim',
    address: '广州海珠区',
  })
})

module.exports = router;

用浏览器或者postman访问localhost:3000(默认端口是3000),可以看到有返回了
Screen Shot 2020-12-19 at 10.06.27.png

安装nodemon实现nodejs热启动 npm install --save-dev nodemon,用nodemon指令提到node指令即可
安装cross-env实现环境变量设置 npm install --save-dev cross-env,编辑server/node_api/package.json

{
  "name": "node-api",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start:dev": "cross-env NODE_ENV=development nodemon ./bin/www",
    "start:prod": "cross-env NODE_ENV=production node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "cors": "^2.8.5",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1"
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "nodemon": "^2.0.6"
  }
}

解决跨域

此时前端展示有了,后端数据也有了,还需要解决跨域问题,因为端口一个是8080,一个是3000 。
在express的app.js文件内编辑:

//跨域问题解决方面
const cors = require('cors');  
app.use(cors({  
    origin:['http://localhost:8080'],
    methods:['GET','POST'],
}));
//跨域问题解决方面
app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
 next(); 
});

设置vue的代理,编辑config/index.js

    proxyTable: {
      '/api': {
        target: 'http://localhost:3000/',
        ChangeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

重启一下express,此时在界面点击按钮,即可看到服务器回传的数据了
Screen Shot 2020-12-19 at 10.24.38.png

后续

接下来可以做的事

  1. 用express实现接口转发的功能
  2. 把express中间层独立出来
  3. 服务端也使用axios,和前端统一
3 声望
0 粉丝
0 条评论
推荐阅读
iview-页面复用时根据路由参数刷新数据
在用iview的时候用到一个交互页面的新增编辑查看页面都一样,所以决定共用一个页面,直接设置了一个opentype参数来区别不同的打开方式(show/edit/new),页面做好后发现有个问题,就是新开一个编辑页面的时候显示...

董志钦阅读 1.6k评论 1

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木149阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青54阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

3 声望
0 粉丝
宣传栏