README.md · xxc/exam-front

### 一、 项目结构
- api:网络接口目录
- assets:资源目录，存放样式、图片等
- Common:通用自定义vue组件
- converts:vue的converter功能，数字文字相互转换，如0转换为男，1转换为女
- prototype:暂时没什么用好像，写了个日期格式的方法
- router:vue-router配置
- store:vue-store的配置
- utils:编写了一个本地存储的方法，可以进行键值对的存取以及设置过期时间
- views:页面，注意编写了页面要在router中配置
- App.vue:模板
- main.js:入口js，相当于程序中的main方法，进行了一系列的配置
### 二、 涉及技术栈
1. vue-router:路由
2. vue-store:状态处理
3. element-ui:饿了吗页面框架
4. axios:ajax请求框架
5. less:样式
### 三、 网络接口配置
1. Base URL的配置
<br>所有请求都以此为前缀，如http://localhost:8086/app.在src/api/axios.js中配置baseUrl即可，配置为当前服务器的地址
    ```js
    // /src/api/axios.js
    const baseURL = 'http://localhost:8086/app'
    ```
2. 接口编写
<br>将网络请求接口编写在/src/api/modules的文件中，然后在index.js中
引入文件，并export出去，便可在代码中通过this.$api.模块名.接口访问
    ```js
    // export出去
    export default {
      baseURL,
      ...category,
      ...paper,
      ...ques,
      ...user,
      ...contest
      // 省略，...表示解构，解构的模块就不需要模块名，以前没考虑到，现在不能乱动，后面的模块不要解构
    }
    // main.js 将api作为vue的一个属性可访问
    Vue.prototype.$api = api
    // 在.vue文件页面中可如下使用
    this.$api.contest.getContest(1)
    ```
### 四、启动
1. 配置baseURL
2. cmd启动
```cmd
npm run serve
```
访问[登录页](http://localhost:8089/login)

xxc/exam-front

简介

发行版

贡献者

近期动态

xxc/exam-front .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

xxc/exam-front