說說QQ音樂專案的那些bug

1.開發工具

1.后端：spring+mybatis+springmvc

2.前端：html+css+js+Vue+webpack

vue中有幾個核心的配置：

1.router（路由)

2.axios

3.CORS(同源策略)–可以通過在vue中的組態檔–webpack.dev.conf.js檔案中配置

2…資料庫

2.1 命名空間namespace

2.2 主鍵自增

關鍵：

如果要實作主鍵自增必須在代碼中國通過useGeneratedKeys進行配置
，不僅如此，還必須在mysql中對表進行自增，不過Navicat中的自增不是那么好配置，我是通過復制代碼然后添加自增那段代碼來實作表的自增了，如果這兩個都配置了，那么就不會報錯了，

下面說說代碼中如何配置主鍵自增：

2.3 mysql的一些坑

在配置資料庫url時一定要在末尾指定時間區，如下：

jdbc.driver=com.mysql.jdbc.Driver
//下面這行代碼的末尾就指定了時間
jdbc.url=jdbc:mysql://localhost:3306/my_databases?serverTimezone=GMT
jdbc.username=root
jdbc.password=123456

3.同源策略的解決

然后在訪問時我們就可以像下面這樣方位目標地址了：

4.vue的一些坑

1.引入element-ui時（如果要不是全部匯入的話），只能以import Input from 'element-ui’這種方式一個個引入，不能使用{}包裹，不然會報錯，

2.給vue原型掛上屬性時，只能在Vue組件（.vue檔案中），訪問（目前好像是這樣，不是太確定，單目前這樣沒有報錯），如下：

3.不需要在main.js中new Vue物件中指定axios

4.需要引入axios和VueAxios不然會報錯，并且要使用Vue.use()使用它，

5.使用axios時，main.js中需要引入axios.

6.有時候更改了組態檔，最后啟動以下服務器，不然會么有效果，

7.通過style=“less” 可以對element-ui組件中含有特點class選擇器的值進行更改，如下：

8.如果要對絕對定位的父元素的子元素進行溢位隱藏，則需要對子元素也設定和父元素相同的定位，否則沒有效果，

//這段代碼需要寫在外部的style中，并且將要設定的選擇器包裹在.el-main（它的父元素），以防更改了全域屬性，注意，lang=‘less’后面不要加scoped，不然就沒有效果了
<style lang='less'>
.el-main{
  ul.el-carousel__indicators.el-carousel__indicators--horizontal{
  top: 75%;
  left: 45%;
  // 對輪播圖的下面的橫線變換成圓形
  .el-carousel__button{ 
    width: 13px;
    height: 12px;
    border-radius: 50%;
    margin-left: 20px;
  }  
}
}

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

Vue.prototype.$axios = axios    //全域注冊，使用方法為:this.$axios
//過后在每個組件中就可以通過this.$axios訪問了axios函式了

5.登錄注冊驗證的總結

一定要先在紙上理清以下驗證邏輯，不然會出現各種各樣的驗證錯誤，
既然用來element-ui中的表單組件，那么只要資料格式出現例外就直接回傳callback函式就可以了，最后通過提交表單中的事件通過validate函式判斷其中的引數valid是否為true就可以判斷所檢驗的表單是否資料格式正確，不需要自己再額外定義一些標記來判斷了，
下面貼上一段注冊驗證的代碼（采用vue實作）

<template>
  <div class="login">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item prop="username">
        <el-input
          type="text"
          v-model="ruleForm.username"
          autocomplete="off"
          placeholder="請輸入用戶名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="pass">
        <el-input
          type="password"
          v-model="ruleForm.pass"
          autocomplete="off"
          placeholder="請輸入密碼"
        ></el-input>
      </el-form-item>
      <!-- 再次輸入密碼 -->
      <el-form-item prop="repeatpass">
        <el-input
          type="password"
          v-model="ruleForm.repeatpass"
          autocomplete="off"
          placeholder="請再次輸入密碼"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="login_fit">
      <a href="/login">登錄</a>
    </div>
    <div class="register_fit">
      <a href="/register" :style="aStyle">注冊</a>
    </div>
    <!-- 用戶名和密碼的圖示 -->
    <div class="user"><img src="@/assets/user.png" alt="" /></div>
    <div class="pass"><img src="@/assets/pass.png" alt="" /></div>
    <div class="pass_1"><img src="@/assets/pass.png" alt="" /></div>
  </div>
</template>

<script>
var patt = /([0-9]|[a-z]|[A-Z]|$|@)/i;
var starPatt = /^[0-9]/i;
var i;
export default {
  data() {
    let self = this;

    // 用戶名校驗
    var validateUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("請輸入用戶名"));
      } else {
        // 如果第一個字符是數字    注意：用戶名第一個字符不能為數字  isNumber=false(代表可以首字符不可以是數字)
        if (starPatt.test(value[0])) {
          self.valiData.isNumber = false;
        }
        // 用于對格式進行長度、字符格式的校驗
        self.validate(value, callback, "user");
      }
    };

    // 密碼校驗  value：為表單中輸入的值          注意：密碼第一個字符可以為數字  isNumber=true(代表可以首字符可以是數字)
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("請輸入密碼"));
      } else {
        self.valiData.isNumber = true; //用于對首字符進行檢驗     注意:data中訪問資料用使用this
        self.validate(value, callback, "pass");
      }
    };

    // 對再次輸入密碼的校驗
    var validateRepeatPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("請再次輸入密碼"));
      } else {
        if (self.ruleForm.pass != self.ruleForm.repeatpass) {
          callback(new Error("2次輸入的密碼不一樣"));
        } else {
          self.valiData.isNumber = true; //用于對首字符進行檢驗     注意:data中訪問資料用使用this
          self.validate(value, callback, "repeatpass");
        }
      }
    };

    return {
      // ruleForm:為表單資料物件--用于初次輸入密碼  重復輸入密碼不能和它共用一個不然兩者的內容一樣
      // 注意：props屬性的值必須在ruleForm中配置
      ruleForm: {
        username: "",
        pass: "",
        repeatpass: "",
      },
      repeatPass: {
        // 用于存盤重復輸入密碼
        pass: "",
      },
      // 用于對首字符進行檢驗
      valiData: {
        isNumber: true,
      },
      status: "",
      islegal: {
        //提交的時候要對3個都進行驗證才可以成功
        user: false,
        pass: false,
        repeatpass: false,
      },
      // rules:表單驗證規則 即（只負責對資料的格式進行校驗）
      rules: {
        // 用戶名校驗規則    blur：當表單失去焦點時
        username: [{ validator: validateUsername, trigger: "blur" }],
        // 密碼校驗規則
        pass: [{ validator: validatePass, trigger: "blur" }],
        //重復密碼的校驗規則
        // 注意：props屬性的值必須在ruleForm中配置   否則該規則無效 即 前面的屬性repeatpass對應props的值
        repeatpass: [{ validator: validateRepeatPass, trigger: "blur" }],
      },
      //樣式設定
      aStyle: {
        color: "rgb(201, 20, 20)",
      },
    };
  },
  methods: {
    // 提交按鈕
    submitForm(formName) {
      const that = this;
      // validate:對整個表單進行校驗的方法       valid=true:代表所有資料格式檢驗成功  valid=false:代表有錯誤的紅色字體提示
      that.$refs[formName].validate((valid) => {
        // 即如果輸入的資料格式都合法就添加資料
        if (valid) {
          that
            .RequestMessage("/spring/adduser", that.ruleForm)
            .then((res) => {
              console.log(res);
              //將添加成功的status存入data的屬性status中
              that.status = res.data.status;
              if (that.status == "success") {
                that.$message({
                  showClose: true,
                  message: "恭喜你，注冊成功!",
                  type: "success",
                });
                //重定向到登錄界面
                that.$router.push("/login");
              }
            })
            .catch((err) => {
              console.log("添加失敗！");
              console.log(err);
              this.$message({
                showClose: true,
                message: "注冊失敗,可能是資料庫例外,請重新注冊!",
                type: "error",
              });
            });
        } else {
          this.$message({
            showClose: true,
            message: "注冊失敗，請重新注冊！可能是資料格式校驗不正確",
            type: "error",
          });
        }
        // 用于向資料庫添加資料
      });
    },
    // 重置按鈕
    // 注意：如果要重置表單 必須表單的所喲props屬性值都必須在ruleForm中配置
    resetForm(formName) {
      // resetFields：對整個表單進行重置
      this.$refs[formName].resetFields();
    },
    // 用于對用戶名和密碼進行校驗的函式
    //   value:為表單數值  callback為data中回呼函式
    validate(value, callback, name) {
      // 對用戶名進行格式校驗   3<=長度<=15
      if (this.valiData.isNumber && value.length >= 3 && value.length <= 15) {
        // 用于判斷資料是否滿足格式要求
        for (i = 0; i < value.length; i++) {
          if (patt.test(value[i])) continue;
          // 如果不合法
          else {
            callback(new Error("只能包含[0-9]/大小寫字母/$/@等字符"));
          }
        }
        if (i == value.length) {
          callback();
        }
      } else {
        if (
          !this.valiData.isNumber &&
          3 <= value.length <= 15 &&
          name == "user"
        ) {
          callback(new Error("首字符不能是數字"));
        } else {
          callback(new Error("字符個數要>=3"));
        }
      }
    },
  },
  mounted() {},
};
</script>

<style lang='less'  scoped>

6.mybatis的一些注意事項

對于查詢

對于更新、洗掉

關于插入資料成功表中卻沒資料

百度過后有以下幾個原因：

1.insert陳述句雖然執行完畢，但是事務沒有執行完畢，即sql陳述句并不是和事務同時完成的，它們有區別，因為事務還未完成所以導致資料沒有寫入表中，

2.sql陳述句已經拼接好，但是沒有執行，（這個暫時沒有理解)

3.sql陳述句執行了事務回滾：sql陳述句內部事務回滾，或sql陳述句所在整個事務回滾 （回滾：就是資料回退，相當于撤銷的意思）

約束檔案內容

1.全域約束檔案mybatis-config.xml檔案

<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">

2.mapper.xml檔案約束

<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

3.報約束不存在

vue中引入jquery

首先要在webpack.conf.dev.js組態檔中的plugins選項中加上下面這段代碼：

 // jQuery相關配置  
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery" 
    }) 

7.路由配置

js檔案：

// 路由
import VueRouter from 'vue-router'
import Vue  from 'vue'
import Index from '../views/index.vue'
import Neopterin from '../components/index/neopterin.vue'
import Ranking from '../components/index/ranking.vue'
import Mv from '../components/index/MV.vue'
import Footer from '../components/index/footer.vue'
import Login from '../components/login/login.vue'
import Register from '../components/register/register.vue'

Vue.use(VueRouter)

const routers=[
    {
        path:'/index',
        component:Index,
    },
    {
        path:'/new',
        component:Neopterin
    },
    {
        path:'/ranking',
        component:Ranking
    },
    {
        path:'/mv',
        component:Mv        
    },
    {
        path:'/footer',
        component:Footer
    },
    {
        path:'/login',
        component:Login
    },
    {
        path:'/register',
        component:Register
    }
]

export default new VueRouter({
    mode:'history',
    routes:routers
})

main.js中：

import router from './router/route'

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
})