Vue系列 =＞ [07] 电商后台管理系统项目 =＞01-登陆页面

一:项目步骤

1.拿到项目先看这三个文件

main.js入口文件
App.vue.根组件
router=>index.js

2.@符号 就是src目录的别名

3.配置Vue.config.js(无需配置)

// 这个是vue读取的配置文件,里面的配置最终都是给webpack写的配置
// 但是我们现在采用的是3.0+的脚手架,讲究是0配置,所以看不见webpack的配置文件webpack.config.js

// 这里写的代码因为是给webpack使用所以需要commonJSde 规范(本质上就是使用require和module.exports这两个命令而已)
// 但是以后我们在项目里面 也就是src文件夹;还是使用的ES6规范(本质上就是import 和export这两个单词的使用)

module.exports = {
  devServer: {
    open: true,
  },
};

4.npm i element-ui -S
全局导入会导致编译打包的体积过大,影响用户体验

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

按需导入 npm install babel-plugin-component -D
1.在babel.config.js里面官网说babelrc也是这个

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

2.在src里面传传建一个plugins文件夹

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.use(Button)
Vue.use(Select)

new Vue({
  el: '#app',
  render: h => h(App)
});

3.修改babel.config.js时候,只能增,不能删除别人的

4.复制组件

二.端程序员

• 1.公司业务线分为PC端,
  移动端(这个现在的技术一般是使用两个代码,一套PC,一套手机浏览器用的 www.xxx.com, m.xxx,com 特例:三星手机只有一套代码,他是针对不同的设备使用了响应布局),小程序端,移动app(安卓,ios)

三.服务器数据导入

• 1.打开phpstudy
  1.新建数据库
  2.打开mydb,复制粘贴到新建的查询里面去

四.配置git

• 1.创建仓库
  2.配置忽略文件:package-lock.json和其他的
  3.改完忽略文件 需要删除缓存 git rm -r --cache .最后有个点g
  4.git status => git add ./ => git commit -m “初始化项目”
  如果是我们得vue项目,那么开始没有prigin地址,因为它在vue create得时候就给我们初始化好了一个仓库,但是没有地址,所以需要手动添加
  git remote add origin https://gitee.com//xxxxx/xxxx/git
  5.git push -u origin master 第一次提交的时候,要指定默认的url,和默认分支;那么以后就可以使用git push简写

6.创建分支

git checkout -b dev 本地创建一个分支,然后切换到dev分支

git push origin dev 这个是把当前更新了得代码提交并且把当前分支也提交.

如果别人代码先提交了,那你得先pull一下,再Push

• 后面开发得时候,采用得是dev分支,main主分支只做代码写完了一些版本以后得1.0-1.1 -1.2

五.项目文件夹解析

1.components里面的文件清除掉
2.plugins是
3.router放置所有路由规则的地方
4.views放置和我们路由相关的一些组件(页面)
里面App.vue是整个根组件,所有组件都挂在这个组件下面
main.js入口文件,是我们所有vue项目的第一个查看的文件
5.assets一个资源目录,放一些全局css,img,字体图片
6.package.json:项目最重要的,npm i时候再里面找所有的依赖项然后安装.
7.vue.config.js webpack配置文件

about以及其他的都要删除

六.登陆页面

1.在view创建Login.vue
2.在index.js里面设置组件并且导4.入路由

 import Login from "../views/Login.vue"
 const routes = [
  {
    path: "/login",
    component: Login,
  },
];

3.在App.Vue里面给一个占位符router-view,Login.vue才能显示
4.设置路由重定向

七.字体图标

一:elementi-ui
类名式:<el-input prefix-icon="el-icon-lock" placeholder="密码"></el-input>
插槽式:<i slot="prefix" class="el-input__icon el-icon-search"></i> 放在input里面

二:iconfont
1.下载下来:iconfont
2.或者在线 先添加到购物车然后找到在线地址 <link rel="stylesheet" href="//at.alicdn.com/t/font_2141222_e5bjjau0jm.css">
prefix-icon="iconfont icon-lock"

八.登陆框

一定要看接口文档，跟别人后端需要的参数保持一致
@keyup.enter.native="login" 回车就可以触发登录事件

九.if else换成return

以后遇到if else 解构,先写错误情况,直接return 结束
if(xxx !== 200) return xxxx

十Axios规则

axios的代码书写，是放在Vue的原型上面，这样每个组件的this都可以访问

Axios.defaults.baseURL = "http://127.0.0.1:8888/api/private/v1/";
Vue.prototype.$http = Axios;

其他

• this.$router变量名称带$符号的,只是为了和自己定义的区别开来
• 登陆以后,要把服务器返回的token值保存起来,供后面使用(数据持久化)

window.sessionStorage.setItem("token", res.data.token);

• JSON.StringFiy JSON.Parse 里面的数据都要用引号括起来,除了数字

完整Vue代码

<template>
  <div class="login-container">
    <!-- 登陆区域 -->
    <div class="login-box">
      <!-- 登陆头像 -->
      <div class="login-logo">
        <img src="../assets//mua~.gif" />
      </div>
      <!-- 用户名和密码 -->
      <div>
        <el-form
          ref="loginFromRef"
          :model="form"
          :rules="rules"
          class="login-form"
        >
          <el-form-item prop="username">
            <el-input
              v-model="form.username"
              clearable
              prefix-icon="iconfont icon-user2"
              placeholder="用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              @keyup.enter.native="login"
              placeholder="密码"
              show-password
              prefix-icon="iconfont icon-lock"
            ></el-input>
          </el-form-item>
          <el-form-item class="login-form-btn">
            <el-button type="danger" @click="login">登陆</el-button>
            <el-button type="info" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //一定要看接口文档，跟别人后端需要的参数保持一致
      form: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    login() {
      this.$refs.loginFromRef.validate(async (val) => {
        if (!val) return this.$message.error("格式错误,请检查用户名和密码");
        const { data: res } = await this.$http.post("login", this.form);
        console.log(res);
        if (res.meta.status !== 200)
          return this.$message.error("登录失败,请检查用户名和密码");
        this.$message.success("登陆成功！");
        window.localStorage.setItem("token", res.data.token);
        this.$router.push("/home");
        //  const res =  this.$http.post('login',this.form).then(res=>{
        //    console.log('请求成功',res);
        //  },err=>{
        //    console.log('请求失败',err);
        //  })
      });
    },
    resetForm() {
      this.$refs.loginFromRef.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  background: url(../assets/Fate.png);
  height: 100%;
  // display: flex;
  // justify-content: center;
  // align-items: center;
}
.login-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 300px;
  background: #fff;
  border-radius: 5px;
  .login-logo {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 145px;
    height: 145px;
    border: 1px solid #ccc;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ccc;
    background-color: #fff;
    img {
      border-radius: 50%;
      width: 100%;
      height: 100%;
      box-shadow: 0 0 10px #ccc;
      background-color: #eee;
    }
  }
}
.login-form {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  transform: translate(-50%);
  padding: 0 30px;
  .login-form-btn {
    text-align: right;
  }
}
</style>

main.js入口文件

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import "./assets/css/global.less";

import Axios from "axios";

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

// axios的代码书写，是放在Vue的原型上面，这样每个组件的this都可以访问
Axios.defaults.baseURL = "http://127.0.0.1:8888/api/private/v1/";
Vue.prototype.$http = Axios;

Vue.use(ElementUI);
Vue.config.productionTip = false;

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

路由文件

import { Link } from "element-ui";
import Vue from "vue";
import VueRouter from "vue-router";
import Login from "../views/Login.vue";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  { path: "/", redirect: "/login" },
  { path: "/login", component: Login },
  { path: "/home", component: Home },
];

const router = new VueRouter({
  routes,
});
// 这个路由守卫一定放在touter实例对象下面,不然beforEach识别不了

router.beforeEach((to, from, next) => {
  if (to.path === "/login") return next();
  const tokenStr = window.localStorage.getItem("token");
  if (!tokenStr) return next("/login");
  next();
});
export default router;