乐淘商城是一个针对鞋类商品的在线交易平台，合适就穿，不合适就换。乐淘为您支付退换货的物流费用，以最快速度把换好的鞋子送到您手中，最好的品牌，最低的价格。乐淘族凭借雄厚的资金实力和在电子商务业界的诚信积累，与Nike、Adidas、Converse、NewBalance等国际大牌深度合作。保证了产品与专卖店同步更新，让您不出家门能最快速度买到当季新款名牌鞋。乐淘族坚持自营，减少中间环节，让利给用户，因此所有产品价格均低于传统销售渠道。
后端管理（pc端）
前端展示（移动端）
前端写好静态页面，交给后端渲染，后端准备数据，渲染页面。
缺点：
渲染工作交给后端，后端需要懂前端的知识。
前后端职责纠缠不清。
?
前端写静态页面，渲染页面， 后端只负责提供数据和接口。
优点：
在前后端分离开发时，首先需要配好 本地化开发环境，也就是说需要在本地搭建后台开发环境。由于我们的后台 使用的是nodejs，因此需要先搭建nodejs环境
node -v以及npm -v查看是否安装成功已经提供letao.zip文件夹
D:\letao目录下打开cmd，执行npm i,此时项目就已经初始化好了使用数据库可视化软件, 进行数据库初始化, 数据库文件参照letao初始化.sql。
注意字符集: UTF-8
介绍文件夹
修改modules文件夹中db.js文件
const pool = mysql.createPool({
host : ‘127.0.0.1‘,//主机地址，不用改
user : ‘root‘,//用户名，不用改
password : ‘root‘,//密码,填写自己数据库的密码
database : ‘letao‘//数据库名，不用改
});
npm start启动项目，启动后窗口不能关闭。移动端商城页面访问：http://localhost:3000/mobile
后端管理页面访问：http://localhost:3000/manage
唯一管理员账号：root 唯一管理员密码：123456
注意：项目启动后窗口不能关闭，如果项目报错了，需要重启服务
git init初始化项目git add .添加代码git commit -m ‘项目初始化‘提交代码git remote add origin git@github.com:jepsongithub/letao.gitgit push origin master我们后端管理系统所有的代码都写到back文件夹下面
搭建了后台管理系统的架子（css image js）
?
开启分支：git branch login
切换分支：git checkout login
在login在开发登录登录功能，等功能开发完成后将代码合并到master分支。
#222d32使用bootstrap的各种组件
栅格系统
面板组件（带标题）
表单组件
按钮组件
提交代码到login分支
校验规则：
参照文档：《bootstrap-validator使用笔记.md》
$form.bootstrapValidator({
//设置小图标
feedbackIcons: {
valid: ‘glyphicon glyphicon-ok‘,
invalid: ‘glyphicon glyphicon-remove‘,
validating: ‘glyphicon glyphicon-refresh‘
},
//设置校验规则
fields:{
username:{
validators:{
notEmpty:{
message:""
},
stringLength:{
min:6,
max:12,
message:""
}
}
},
password:{
}
}
});
$form.on("success.form.bv", function(e){
//阻止表单的默认提交
e.preventDefault();
//使用ajax进行提交
$.ajax({
type:"",
url:"",
data:{},
dataType:"json",
success:function(data){
}
});
})
$form.data("bootstrapValidator").updateStatus("username", "INVALID", "callback")动态的改变状态
点击重置按钮时，还需要重置表单的错误提示信息。
$("[type=‘reset‘]").on("click", function(){
//重置表单样式
$("form").data("bootstrapValidator").resetForm();
});
提交代码到login分支，合并功能到master分支
//注册了全局事件，所有的ajax只要开始就会开启进度条
$(document).ajaxStart(function () {
NProgress.start();
});
//所有的ajax只要结束，延迟500毫秒，结束进度条
$(document).ajaxStop(function () {
setTimeout(function () {
NProgress.done();
}, 500);
});
模态框组件的使用
提交代码
原文：https://www.cnblogs.com/f2ehe/p/12571943.html