说说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/>',
})