前后端小项目链接

1.vue的创建

        vue的项目创建

                1.1 vue create vue_name

                1.2 Babel  Router(路由) CSS Pre-processors 

                        路由可通过：npm i vue-router@3.5.2 -S 下载

                1.3less

                1.4 In dedicated config files

         1.5 启动命令：npm run serve  端口号在vue.config。js中配置 devServer

        1.6当缺失依赖时  npm install 下载  【根据：package-lock.json下载】

      1.7  并在mian。js中导包

//  npm install axios 下载axios  get请求

import axios from 'axios'

Vue.prototype.request=axios

// https://element.eleme.cn/#/zh-CN/component/pagination#dai-you-bei-jing-se-de-fen-ye

//npm i element-ui -S 下载element-ui

// ElementUI 组件

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

// 引入echarts

//下载 npm install echarts@4.9.0

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 解决ElementUI导航栏中重复点菜单报错问题

const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location) {

    return originalPush.call(this, location).catch(err => err)}

1.8 添加地图时 在 index.html 加入        <script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=百度地图密钥"></script>

2.idea的创建

get 请求

        const { data: res1 } = await axios.get(`api/T_USERContrller/isuserexist`, {

          params: {

            name: this.form.name, }, });

        console.log(res1);

        this.isuserexist1=res1;

post请求：

      let params={

          name:this.form.name,

        };

        const data = new FormData();

        for (let k in params) {          data.append(k, params[k]); }

        this.request({

          method: "post",

          url: `api/T_USERContrller/isuserandpwdexist`,

          data,

        }).then((res)=>{  })

post 无法添加await  无法解决数据延迟问题，如果使用get后依旧无法解决，直接把嵌套方法

用户登录界面

1.编写用户名栏和密码栏 使用 show-password 用于密码栏，切换是否可视

2.编写 表单的规则 

                2.1用户名：必填，长度大于1~20，失去焦点验证

                2.2 密码 必填

3.验证用户名 定义方法  isuessrexist get方法 async 局部刷新  get请求（await，防止数据延迟）传入用户名失去焦点后的名字，返回给isuserexist1 

4. 验证密码 当点击登录按钮时 传入 用户名 和密码 通过【isuserandpwdexist】方法判断

        返回 【密码存在】 设置 【isdengluok】为ok（全局守卫）

        并传递用户名【username】 ，

this.$router.push跳转页面

        否则返回 后端传递的名字

5.点击注册后，跳转注册页面