practise vue shop front
1.0.0
ทำตามโปรแกรมรหัสสำหรับหลักสูตร Dark Horse Front End Element 2019
ในปัจจุบันขอแนะนำให้เรียนรู้ vue.js ก่อน อย่าทำงานหนัก
โครงการนี้รองรับดัชนีโครงการเซิร์ฟเวอร์ Back -Ed
อินเทอร์เฟซ API พื้นหลังที่ใช้ในโครงการนี้คือส่วนต่อประสาน API พื้นหลังสาธารณะที่จัดทำโดยสมาคมคุ้มครอง Luo Tianyi
Dark Horse Front -ที่อยู่อย่างเป็นทางการของหลักสูตร:
ที่อยู่โครงการด้านหน้า: http://shop.liulongbin.top/
ย้อนกลับ -ที่อยู่อินเตอร์เฟส: https://www.liulongbin.top: 8888/api/private/v1/v1/
เอกสารอินเตอร์เฟส API: ลิงค์: https://pan.baidu.com/s/1kjpfafapadw4jdgjct54nq รหัสแยก: mgbr
ดาวน์โหลดชุดหลักสูตรเต็ม: ลิงค์: https://pan.baidu.com/s/1hbwzlr-wbjt28ysezvi6aq extract code: 2urn
หมายเหตุ: ที่อยู่อินเทอร์เฟซด้านหลังต้องมีโทเค็นในการส่งและรับคำขอตามปกติ
โปรดอย่าลบข้อมูล โดยเฉพาะอย่างยิ่งในการอนุญาตบทบาทนักเรียนที่ลบข้อมูลการอนุญาตไม่สามารถดำเนินการต่อไปได้
ผู้ใช้สถานี B: อินเทอร์เฟซ API Backstage Public ที่จัดทำโดย Luo Tianyi Protection Association
ชื่อผู้ใช้: รหัสผ่านผู้ดูแลระบบ: 123456
ที่อยู่โครงการของสมาคมคุ้มครอง Luo Tianyi: http://gl.timemeetyou.com
ในกรณีที่อินเทอร์เฟซไม่ถูกต้องหรือผู้ใช้ถูกลบคุณสามารถพูดคุยเกี่ยวกับมันเป็นส่วนตัวเพื่อกู้คืนฐานข้อมูล
# 克隆项目
git clone https://github.com/wangxinleo/learnVue_shop.git
# 进入项目目录
cd learnVue_shop
# 安装依赖
npm install
# 本地开发 启动项目
npm run serve
# 克隆项目
git clone https://github.com/wangxinleo/learnVue_shop.git
# 进入项目目录
cd learnVue_shop
# 切换到server分支
git checkout -b server origin/server
# 拉取server分支代码
git pull
# 安装依赖
npm install
# 源码部署
node ./app.js
- src //开发目录
- asset // 存放静态文件
- css
- font
- img
- common // 公用js文件
- network // api请求文件
- goodsCom
- home
- login
- order
- report
- rightsAndRoles
- users
- request . js // 封装axios请求
- router // 动态路由
- store // Vuex
- view // 视图文件
- App . vue
- main - dev . js //用于开发环境的入口文件
- main - prod . js //用于生产环境的入口文件
- main . js // main模板文件
- . browserslistrc // 指定打包的代码对哪些浏览器支持
- . editorconfig // 代码规范
- . eslintrc . js // eslint配置文件
- babel . config . js // 插件配置
- package . json //项目信息文件
- vue . config . js //用户自定义webpack配置文件 // 以login.vue 为例
执行 login ( ) 方法
--> 到network/login下找到login请求
--> 引用 request.js 封装的axios 方法
--> 请求到数据返回到login.vue 中继续处理
--> 登陆成功ทำไมต้องใช้วิธีนี้? ตัวอย่างเช่นหากอินเทอร์เฟซ API พื้นหลังเปลี่ยนไปชั่วคราวเราจำเป็นต้องปรับเปลี่ยนตัวแปร URL ของไฟล์ request.js ภายใต้โฟลเดอร์เครือข่ายเพื่อเปลี่ยนอินเตอร์เฟส API ทั่วโลกเพื่อให้สอดคล้องกับการคิดแบบแยกส่วนและการจัดการรหัสที่สะดวกยิ่งขึ้น นอกจากนี้ยังสะดวกกว่าสำหรับการใช้วิธี API ซ้ำ
// 加入了$bus的应用，用于跨组件通信
// main.js
Vue . prototype . $bus = new Vue ( )
// usersChildren/usersFunc/addUserDialog.vue
this . $bus . $emit ( 'freshClick' ) //很像父子之间传值的方法
// Users.vue
this . $bus . $on ( 'freshClick' , ( ) => {
console . log ( this )
this . getUsersList ( )
} )
// 父子组件通信
// 子组件代码实例
< template >
< div @ click = "open" > </ div >
< / template>
methods : {
open ( ) {
this . $emit ( 'showbox' , 'the msg' ) ; //触发showbox方法，'the msg'为向父组件传递的数据
}
}
// 父组件代码实例
< child @ showbox = "toshow" : msg = "msg" > < / child > //监听子组件触发的showbox事件,然后调用toshow方法
methods: {
toshow ( msg ) {
this . msg = msg ;
}
}ดาวน์โหลดที่อยู่: vscode
เครื่องมือนี้จะจัดรูปแบบรหัสสำหรับคุณโดยอัตโนมัติ VSCODE ไปที่ปลั๊กอินเพื่อ ดาวน์โหลด ในโหมดการกำหนดค่า JSON
{
"[vue]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
},
"editor.quickSuggestions" : {
"strings" : true
},
"workbench.colorTheme" : " One Monokai " ,
"editor.tabSize" : 2 ,
"editor.detectIndentation" : false ,
"emmet.triggerExpansionOnTab" : true ,
"editor.formatOnSave" : true ,
"javascript.format.enable" : true ,
"stylelint.enable" : true ,
"css.validate" : false ,
"less.validate" : false ,
"scss.validate" : false ,
"stylelint.autoFixOnSave" : true ,
"git.enableSmartCommit" : true ,
"git.autofetch" : true ,
"git.confirmSync" : false ,
"[json]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
},
"liveServer.settings.donotShowInfoMsg" : true ,
"explorer.confirmDelete" : false ,
"javascript.updateImportsOnFileMove.enabled" : " always " ,
"typescript.updateImportsOnFileMove.enabled" : " always " ,
"files.exclude" : {
"**/.idea" : true
},
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : true
},
"[javascript]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
},
"[scss]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
},
"[jsonc]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
}
}เครื่องมือนี้จะกำหนด CSS, SASS, รหัสน้อยลงและเรียงลำดับคำสั่งของ CSS VSCODE โดยอัตโนมัติ
{
"stylelint.enable" : true ,
"css.validate" : false ,
"less.validate" : false ,
"scss.validate" : false ,
"stylelint.autoFixOnSave" : true
}[ต้นทุนนำเข้า] ดูขนาดโมดูลที่ขึ้นกับที่คุณแนะนำ
[แท็กปิดอัตโนมัติ] เติมแท็ก HTML โดยอัตโนมัติเช่นอินพุต <a> จะทำขึ้นโดยอัตโนมัติ </a>
[แท็กเปลี่ยนชื่ออัตโนมัติ </a> เปลี่ยน </b> ก <a> โดย <b>
