Vue综合实战项目

笔试题

[1,2,3,4,5,6,7] 找数组中任意两个数字 相加的和 9 ,找出所有符合条件下标

[2,7] [3,6] [4,5]

=> 任意n个数字 相加的和 m

Vue阶段项目综合演练

一、 项目概要

1. 效果前瞻

管理后台

账号：admin

密码：admin

2. 开发流程

• 项目立项（需求分析、技术选型、项目人员确定）
  • 项目立项报告（百度搜）【产品经理，PM】
    • 当前背景
    • 项目需求
    • 人员安排
    • 功能介绍
    • 市场需求
    • 项目风险
• 产品原型（设计产品原型图-进行ui设计）
  • 产品原型图
• 项目开发（前端与后端）【周期最长的一步】
  • 设计（UI）:设计图和切图
  • 前端：出一版静态页（模板）
  • 后端：服务端
• 项目测试
  • 测试部门：QA
• 项目上线
  • 运维&后端

3、开发环境

• 开发工具：vs code并安装vue开发工具 vetur
• 开发环境：windows/max
• 项目运行环境： node v10+
• Vue 脚手架： vue-li 4.5.7
• 代码版本工具: Git/Gitee

二、初始化远程仓库

1、初始化远程仓库

以 Github 为例： https://github.com

2、创建项目

查看当前的分支信息

git branch -v

git checkout -b dev

// 相当以下这两个命令
git branch dev
git checkout dev

3、记住密码

git 分支模型

master 分支上面 稳定的代码 并且代码随时可以发布

hotfixes 主要修复线上问题的

develop 分支 开发的分支

realease 做测试用的 修复bug

feature 分支 特性分支

产品经理 => 开发一个新的特性

git checkout -b feature

如果出现以下冲突

解决冲突之后，然后还要运行以下的命令

git status 
git add *  // 提交文件到缓存区
git commit -m "合并冲突"

创建登录的页面

1. 配置路由

  {
    path: '/',
    name: 'Login',
    component: Login
  },

2. 创建一个空白的组件 Login.vue

   <!-- 登录页面 -->
   <template>
   <div class=''>
       <h1>登录</h1>
   </div>
   </template>
   
   <script>
   //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
   //例如：import 《组件名称》 from '《组件路径》';
   
   export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
   data() {
   //这里存放数据
   return {
   
   };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
   watch: {},
   //方法集合
   methods: {
   
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
   
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
   
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
   }
   </script>
   <style lang='less' scoped>
   
   </style>
   

流程

snipaste 截图软件

安装 element-ui

npm i element-ui -S

在 main.js文件中加入以下代码

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

Vue.use(ElementUI);

安装 axios 请求库

npm install --save axios

Login.vue 页面的和校验代码

<!-- 登录页面 -->
<template>
  <div class="myadmin-login">
    <h1>后台管理系统</h1>
    <div class="myadmin-login-form">
      <el-form :model="form" ref="loginForm" :rules="rules">
        <el-form-item label="" prop="username">
          <el-input v-model="form.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            v-model="form.password"
            placeholder="密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-button" @click="handleLogin('loginForm')">登录</el-button>
        </el-form-item>
      </el-form>
      <div class="login-p">
        <p>温馨提示</p>
        <p>未登录过的新用户，自动注册</p>
        <p>注册过的用户可凭账号密码登录</p>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
          username:[
              {
                  required:true,
                  message:"账号不能为空",
                  trigger:"blur"
              }
          ],
          password:[
               {
                  required:true,
                  message:"密码不能为空",
                  trigger:"blur"
              }
          ]
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
      handleLogin:function(loginForm){
          console.log("提交信息");
          this.$refs[loginForm].validate((valid)=>{
              if(valid){
                  // 发请求 拿数据
                  this.$message("校验成功了");
                  
              }else{
                  this.$message({
                      type:"warning",
                      message:"校验没有成功"
                  })
              }
          })
      }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.myadmin-login {
  padding-top: 30px;

  h1 {
    color: white;
    font-weight: 200;
    text-align: center;
  }

  .myadmin-login-form {
    border-radius: 10px;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
    width: 300px;
    height: 300px;
    .login-button {
      width: 100%;
    }
    .login-p{
        text-align: center;
        color:red;
    }

  }
}
</style>

配置myaxios

import axios from "axios";
/* 基本的 url */
const instance = axios.create({
  baseURL: "http://linweiqin.cn:8001/",
});
/* 响应的拦截器 */
instance.interceptors.response.use(
  function (response) {
    return response.data;
  },
  function (error) {
    return Promise.reject(error);
  }
);

export default instance;

api 文件接口

import myaxios from "../myaxios/myaxios";

/* 
    导出各种接口
*/
// export const login = (params) =>
//   myaxios.post("admin/login", params).catch((err) => console.log(err));
export const login = (params) =>{
   return  myaxios.post("admin/login", params).catch((err) => console.log(err));
}

常见跨域的三种方式

1. 后台 代理
2. JSONP
3. CORS 后台运行跨域（现在使用这种方法）