在线考试系统（二）前端项目搭建

前端项目搭建

安装nodejs和cnpm

npm install --registry=https://registry.npm.taobao.org
npm install cnpm -g –registry=https://registry.npm.taobao.org

查看node和cnpm版本

安装vue-cli

vue-cli是Vue脚手架（是一个基于 Vue.js 进行快速开发的完整系统）
通俗点说就是代码生成器，可以快速生成一套基于Vue完整的前端框架，单独编译，单独部署。可以再集成各种第三方插件，扩展出更多的功能。
因为Vue是渐近式框架，你可以用它一个功能，也可以用全家桶。比如你可以在老的jsp或thymeleaf项目里，引入vue.js，只用它核心的数据绑定功能。
所以往简单的说就是：Vue-cli= Vue.js + 一堆的js插件。

cnpm install -g @vue/cli //这个是从镜像源下载

或者升级vue-cli版本

npm update -g @vue/cli
yarn global upgrade --latest @vue/cli
或者
npm uninstall vue-cli -g   //卸载旧版本vue-cli。
npm install -g @vue/cli

创建vue项目

以管理员身份打开命令行界面，进入任意一个想要创建项目的文件夹

输入：vue create exam-text-master

选中Vue 2这个版本 然后回车

测试项目是否启动成功

看到如下效果：

浏览器访问效果

Npm和cnpm和yarn区别

npm

全名 node package manger。
是Node的开放式模块登记和管理系统
用于Node.js包的发布、传播、依赖控制，网址： https://www.npmjs.com/
npm 提供了命令行工具，可以方便地下载、安装、升级、删除包，也可以让你作为开发者发布并维护包

npm install --registry=https://registry.npm.taobao.org

cnpm

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常

npm install cnpm -g --registry=https://registry.npm.taobao.org

yarn

“Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ，正如 官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的。

npm install -g yarn
yarn –version

在hbuildx中打开创建好的项目

Vue-Cli 4.x往上目录说明
node_modules 第三方依赖，我们安装的各种依赖都在个文件件里面
public 存放公共资源的地方，里面有一个index.html
src 这个是重点，我们的源码以及开发的静态资源等都在里面
src/assets 静态资源，css、img、js、font等
src/compoments 自定义的公共组件
src/router 路由配置，用于页面的跳转配置
src/views 视图组件
src/store 是vuex的文件，主要用于项目里边的一些状态保存。比如state、mutations、actions、getters、modules。
App.vue 首页组件（默认组件）,也叫根组件
main.js 入口文件，一切的入口
.browserslistrc 配置使用CSS兼容性插件的使用范围
.eslintrc.js 配置ESLint
babel.config.js 使用一些预设
package.json 项目描述既依赖
package-lock.json 版本管理使用的文件

版本号对应

Vue CLI 4.5以下，对应的是Vue2
Vue CLI 4.5及以上，对应的是Vue3，当然，创建项目的时候可以选择Vue2

查看Vue版本

安装axios

axios介绍

1、 axios是一个基于Promise的HTTP库，而ajax是对原生XHR的封装；可以用在浏览器和 node.js 中。Axios对ajax的封装，类似jquery对ajax的封装一样
2、ajax技术实现了局部数据的刷新，而axios实现了对ajax的封装。

cnpm install --save axios

安装成功后package.json里面会有依赖引入

安装router

router介绍

	cnpm install vue-router@3.1.0  --save

安装成功后package.json里面会有依赖引入

创建router/index.js文件

不创建该文件启动项目会失败

修改main.js

import Vue from 'vue'
import App from './App.vue'
//全局注册router对象，在项目中所有的页面都可以用到router这个对象
import router from './router'
//全局注册axios对象
import axios from 'axios'
//让axios每次发送请求的时候，在url带上一个api(可以直接百度axios发送请求的过程，以及参数)
axios.defaults.baseURL = 'api'  // http://localhost:8080/#/api
//给Vue函数添加一个原型属性$axios 指向axios 这样做的好处是在vue实例或组件中不用再去重复引用axios
// 直接用this.$axios就能执行axios方法了
Vue.prototype.$axios = axios
//productionTip设置为 false ，可以阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

测试项目是否启动成功

修改APP.vue

删除assets下面的logo.png

删除HelloWorld.vue

启动并测试访问是空白页面

创建.env.dev 和 .env.prod文件

修改package.json文件

启动测试

修改vue.config.js(处理跨域请求)

什么是跨域，就是请求协议、域名、端口三者之间的任意一个与当前页面的url不同即为跨域

const { defineConfig } = require('@vue/cli-service')
const path = require('path') //必须引入
const resolve = dir => path.join(__dirname, dir)//必须引入
let target = process.env.VUE_APP_BASEURL;//.env.dev配置的VUE_APP_BASEURL路径

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,//取消eslint校验代码 eslint效验代码太严格，比如文件名一定要驼峰命名不然就报错
  assetsDir: 'static',//放置生成的静态资源 (js、css、img、fonts) 的目录。
  productionSourceMap: false,//如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产
  devServer: {
  	// 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，
  	//你需要在开发环境下将 API 请求代理到 API 服务器。
  	//这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
  	proxy: {
  		//这里api要和main.js里面配置的api相同，浏览器路径：http://localhost:8080/#/api
		// 也就是请求是的路径中包含/api  就会走代理服务器  可以写多个
  		'/api': {
  			// target: 'http://127.0.0.1:8081', //设置你调用的接口域名和端口号 也就是服务器路径
  			target: target, //设置你调用的接口域名和端口号
  			changeOrigin: true,
  			pathRewrite: {//路径重写，这是一个正则，把api替换空字符串，其实就是将原路径中的/api切除掉
  				'^/api': ''
  			}
  		}
  	}
  }
})

更多配置参考：https://cli.vuejs.org/zh/config/#assetsdir

创建登录页面

login页面

<template>
  <div>
      用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
      <br><br>
      密码： <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
      <br><br>
      <button v-on:click="login">登录</button>
  </div>
</template>

<script>

  export default {
    name: 'Login',
    data () {
      return {
        loginForm: {
          username: '',
          password: ''
        }
      }
    },
    methods: {
      login () {
        this.$axios
          .post('/login/login.htm', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          .then(successResponse => {
            if (successResponse.data.code === 200) {
              this.$router.replace({path: '/index'})
            }
          })
          .catch(failResponse => {
          })
      }
    }
  }
</script>

Router路由js文件

import Vue from 'vue'
import Router from 'vue-router'
//导入刚刚编写的组件
import Login from '@/components/page/Login'

//使用vue对象注册路由
Vue.use(Router)
//通过export导出自定义路由对象，帮助我们跳转页面
export default new Router({
	routes:[
		{
			path:'/login',//login是App.vue的子组件
			name:'Login',
			component:Login//表示对应的登录组件地址
		}
	]
})

启动项目测试