根据Vue。js + UI元素+ MongoDB进行开发
<强> P1安装Vue-CLI
Vue。js文档
利用Vue.js提供的一个官方命令行工具
<强> Vue。js主要目录结构
完成后就可以在/src/组件/* .vue模板中写代码,按ctrl + s保存后页面会自动刷新,若无效请检查端口是否被占用
<强> P2安装UI元素
元素UI文档
完成后在main.js中添加如下代码完整引入元素,就能在/src/组件/*。vue模板中使用UI元素的组件
<强> P3登录注册功能
出口默认{
名称:“注册”,
数据(){
var validateUser=(规则,价值,cb)=比;{
var模式=/^ [\ w \ u4e00 - \ u9fa5]{10} 3美元/g
如果(值=https://www.yisu.com/zixun/==? {
cb(新的错误(“请输入用户名'))
}else if (! pattern.test(值)){
cb(新的错误(“请输入3 - 10个字母/汉字/数字/下划线”))
其他}{
cb ()
}
}
var validatePwd=(规则,价值,cb)=比;{
var模式=/^ \ {20}3 $/g
如果(值=https://www.yisu.com/zixun/==? {
cb(新的错误(“请输入密码”))
}else if (! pattern.test(值)){
cb(新的错误(“请输入3个非空白字符”))
其他}{
如果(this.registerForm。checkPwd !==? {
这个。refs.registerForm.validateField美元(“checkPwd”)
}
cb ()
}
}
var validateCheckPwd=(规则,价值,cb)=比;{
如果(值=https://www.yisu.com/zixun/==? {
cb(新的错误(“请再次输入密码”))
}else if(价值!==this.registerForm.pwd) {
cb(新的错误(“两次输入密码不一致!”))
其他}{
cb ()
}
}
返回{
registerForm: {
用户名:”,
pwd:”,
checkPwd:“
}，
registerRule: {
用户名:(
{验证器:validateUser,触发:‘模糊’}
),
pwd:(
{验证器:validatePwd,触发:‘模糊’}
),
checkPwd:(
{验证器:validateCheckPwd,触发:‘模糊’}
]
}
}
}，
方法:{
submitForm (formName) {
美元。参考文献[formName] . validate((有效)=比;{
如果(有效){
…
其他}{
返回假
}
}）
}
}
}
之前
<>强利用axios实现与后端数据的交互
