前后端分离简单架构搭建 Vue-Cli 后端接口Api+Swagger(1) -前端

前端由于UI 基于ElementUI 所以选择Vue 后端语言是C# 基本的WebApi+Swagger接口文档管理

第一步前端架构的搭建
需要下载nodejs 自行下载
下载vscode及代码自动格式化工具 可根据个人喜好自行搜索

然后现在桌面建立一个空的文件夹 例如Vue
打开
搭建vue cli 基本命令 建议不要npm cnpm混合使用 要么使用npm 要么使用淘宝镜像cnpm
npm install cnpm -g 配置国内淘宝镜像 速度会比npm快不少
cnpm install -g vue-cli 配置Vue脚手架项目
vue init webpack 配置Webpack
cnpm install 配置
cnpm run dev 编译开发环境 默认端口8080
cnpm run build 编译打包

基本介绍完成 开始搭建
cd desktop/vue 调整到桌面指定文件夹
cnpm install -g vue-cli
vue init webpack
搭建脚手架项目
先看看具体目录

基于各个文件做详细说明
main.js 为程序统一继承js文件即公共js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
/* eslint-disable */

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'
import quillEditor from 'vue-quill-editor'
// 一定要引入这三个css，不然文本编辑器会出现不规则黑白几何图形
// 这三个css可以在main.js中引入，也可以在具体使用的.vue文件中引入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(ElementUI)
Vue.use(quillEditor)

Vue.config.productionTip = false
// 引入mockjs
//require('./mock.js')

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

Vue.filter('getYMD', function(input) {
  return input.split(' ')[0]
})

router下的index.js为路由配置js

/* eslint-disable */

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Demandindex from '@/components/Team/Demand/Index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Demandindex',
      component: Demandindex
    },
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ],
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://192.168.0.200:80/', //设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/' //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我 要调用'http://xxx.xxx.xxx.xxx:8081/user/add'，直接写‘/api/user/add’即可
        }
      }
    }
  }
})

使用的请求为axios 需要配置包 具体命令都大同小异
npm install axios --save
我对apijs做了一层封装

import axios from 'axios'
import Vue from 'vue'
axios.defaults.baseURL = 'http://192.168.0.200:80' // 配置你的接口请求地址
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN //配置token,看情况使用
axios.defaults.headers.post['Content-Type'] =
  'application/x-www-form-urlencoded' // 配置请求头信息。

Vue.prototype.$axios = axios

// 请求拦截器
axios.interceptors.request.use(
  function (config) {
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)
// 响应拦截器
axios.interceptors.response.use(
  function (response) {
    return response
  },
  function (error) {
    return Promise.reject(error)
  }
)

// 封装axios的post请求
export function fetch (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .post(url, params)
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        reject(error)
      })
  })
}

// 封装axios的post请求
export function fetchfile (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .post(url, params, {
        responseType: 'blob'
      })
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        reject(error)
      })
  })
}

export function getFiles (url) {
  return new Promise((resolve, reject) => {
    axios({
      method: 'get',
      url,
      responseType: 'arraybuffer'
    })
      .then(data => {
        resolve(data.data)
      })
      .catch(error => {
        reject(error.toString())
      })
  })
}

export default {
  JH_news (url, params) {
    return fetch(url, params)
  },
  Hosturl () {
    return axios.defaults.baseURL + '/'
  },
  getFile (url) {
    return getFiles(url)
  },
  JH_File (url, params) {
    return fetchfile(url, params)
  }
}

发布的时候需要注意的几个问题 常见问题就是发包后找不到文件或者elementui字体文件丢失
解决方案如下

解决了问题之后
npm run build 发包完成后文件在dist下面 自行丢入后端程序前端文件夹即可

后端构建在下篇文章进行详细说明