IHRM项目三章_前端项目搭建

最新推荐文章于 2024-04-02 00:36:39 发布

单人影i

最新推荐文章于 2024-04-02 00:36:39 发布

阅读量560

点赞数

分类专栏：前端 vue 文章标签： vue前端项目搭

本文链接：https://blog.csdn.net/a185589690/article/details/89117296

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

脚手架工程
- 技术栈
  vue 2.5++
  elementUI 2.2.2
  vuex
  axios
  vue-router
  vue-i18n
- 前端环境
  node 8.++
  npm 5.++
node.js安装教程:http://www.runoob.com/nodejs/nodejs-install-setup.html
vue.js安装教程:https://blog.csdn.net/muzidigbig/article/details/80490884
我并没有使用cnpm. 很多少前端都说安装之后如果有自己写的公共包,拉去的时候会有一堆诡异的问题.我也不是一个专业的前端,所有慢就慢点吧.

前端脚手架搭建爬坑

解决办法

删除文件夹node_modules
然后安装cnpm
运行:
cnpm cache clean 不行的话在运行 npm cache verify
然后在运行npm run dev

基本项目搭建起来之后项目结构:
- 我修改了访问的端口号, 默认的localhost也可以,不过这么写被人可以通过ip直接访问我的前端项目.
- 修改本地访问ip的地方,8080就是端口号, 这些都是可以自己改的.
- 进来的时候,默认的路由设置是到 HelloWorld.vue 页面.
- 修改最外层的index.html
  - ```
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title>管理系统</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_wyhhdpv5lhvbzkt9.css">
    <style>
      html,body,#app{height:100%;padding: 0;margin:0;}
    </style>
  </head>
  <body >
  
  <div id="app" ></div>
  
  </body>
  
  </html>
```
  效果:
- 安装element-ui 命令: npm install element-ui --save
- 剩下的就是画前端的页面了.. 我也不是很专业, 就不贴出来了.
vue的路由概念:
- 路由分为两种: 通用路由和模块路由
  - 通用路由: 登录,错误等通用的页面
  - 模块路由:各个子模块的业务路由.
交互流程:
- UI组件交互操作;
- 调用统一管理的api service请求函数.发送请求;
- 使用封装的request.js发送请求;
- 获取服务器返回
- 更新data数据
  - 所以我们一般都会把api统一管理,按照功能模块来划分

request.js就是对于axios的封装,便于统一处理 POST，GET 等请求参数，请求头，以及错误提示信息等。具体可以参看 request.js。它封装了全局 request拦截器、 respone拦截器、统一的错误处理、统一做了超时，baseURL设置等

import axios from 'axios'
import {Message} from 'element-ui'
import store from '@/store'
import {getToken} from '@/utils/auth'

// create an axios instance
const instance = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // request timeout
})

const ok = "10000";

// request interceptor
instance.interceptors.request.use(
  config => {
    // Do something before request is sent
    if (store.getters.token) {
      config.headers['Authorization'] = `Bearer ${getToken()}` // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
    }
    return config
  },
  error => {
    // Do something with request error
    Message.error("对不起，出错了")
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// respone interceptor
instance.interceptors.response.use(
  response => {
    // debugger
    const res = response.data
    const errCode = res.code
    if (errCode !== undefined) {
      // debugger
      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
      if (errCode === 50008 || errCode === 50012 || errCode === 50014) {
        Message({
          message: '你已被登出，请重新登录',
          type: 'error',
          duration: 5 * 1000
        })
        store.dispatch('FedLogOut').then(() => {
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
        return Promise.reject(new Error('token expired'))
      }else if (errCode != ok) {
        Message({
          message: res.message,
          type: 'error',
          duration: 5 * 1000
        })
      }
      return response;
    } else {
      return response
    }
  },
  /**
   * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
   * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
   */
  //  const res = response.data;
  //     if (res.code !== 20000) {
  //       Message({
  //         message: res.message,
  //         type: 'error',
  //         duration: 5 * 1000
  //       });
  //       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
  //       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  //         MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
  //           confirmButtonText: '重新登录',
  //           cancelButtonText: '取消',
  //           type: 'warning'
  //         }).then(() => {
  //           store.dispatch('FedLogOut').then(() => {
  //             location.reload();// 为了重新实例化vue-router对象 避免bug
  //           });
  //         })
  //       }
  //       return Promise.reject('error');
  //     } else {
  //       return response.data;
  //     }
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export const createAPI = (url, method, data) => {
  let config = {}
  if (method === 'get') {
    config.params = data
  } else {
    config.data = data
  }
  return instance({
    url,
    method,
    ...config
  })
}

export const createFormAPI = (url, method, data) => {
  let config = {}
  config.data = data
  config.headers = {
    'Cache-Control': 'no-cache',
    'Content-Type': 'application/x-www-form-urlencoded'
  }
  config.responseType = 'json'
  config.transformRequest = [
    function(data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }
  ]
  return instance({
    url,
    method,
    ...config
  })
}
export const createImgAPI = (url, method, data) => {
  let config = {}
  config.data = data
  config.headers = {
    'Cache-Control': 'no-cache',
    'Content-Type': 'application/x-www-form-urlencoded'
  }
  config.responseType = 'blob'
  config.transformRequest = [
    function(data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }
  ]
  return instance({
    url,
    method,
    ...config
  })
}

单人影i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IHRM项目三章_前端项目搭建

脚手架工程技术栈 vue 2.5++ elementUI 2.2.2 vuex axios vue-router vue-i18n 前端环境 node 8.++ npm 5.++ node.js安装教程:http://www.runoob.com/nodejs/nodejs-install-setup.html vue.js安装教程:https://...
复制链接

扫一扫