practise vue shop front
1.0.0
Suivez le programme de code pour le cours de l'élément avant Dark Horse 2019.
À l'heure actuelle, il est recommandé d'apprendre Vue.js d'abord. Ne travaillez pas dur
Ce projet prenant en charge le projet de serveur index: Learnvue_shop Support Server API Project
L'interface API de fond utilisée dans ce projet est l'interface API de fond publique fournie par la Luo Tianyi Protection Association
Dark Horse Front - Adresse officielle du cours officiel:
Adresse du projet avant: http://shop.liulongbin.top/
Back -end Interface Adresse: https://www.liulongbin.top: 8888 / api / private / v1 / v1 /
Document d'interface de l'API: lien: https://pan.baidu.com/s/1kjpfafapadw4jdgjct54nq Code d'extrait: MGBR
Téléchargez un ensemble complet de cours: lien: https://pan.baidu.com/s/1hbwzlr-wbjt28ysezvi6aq Code d'extrait: 2urn
Remarque: L'adresse d'interface arrière doit avoir un jeton pour envoyer et recevoir la demande normalement.
Veuillez ne pas supprimer les données. Surtout dans les autorisations de rôle, les étudiants qui suppriment les données des autorisations ne peuvent pas continuer à le faire.
Utilisateur de la station B: l'interface API public dans les coulisses fournie par Luo Tianyi Protection Association
Nom d'utilisateur: Mot de passe administrateur: 123456
Adresse du projet de Luo Tianyi Protection Association: http://gl.timemeetyou.com
Dans le cas où l'interface n'est pas valide ou que l'utilisateur est supprimé, vous pouvez en parler en privé pour restaurer la base de données
# 克隆项目
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 中继续处理
--> 登陆成功Pourquoi utiliser cette façon? Par exemple, si l'interface API d'arrière-plan change temporairement, nous n'avons qu'à modifier les variables URL du fichier request.js sous le dossier réseau pour modifier l'interface API globalement pour se conformer à la pensée modulaire et à la gestion du code plus pratique. Il est également plus pratique pour la réutilisation de la méthode 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 ;
}
}Télécharger l'adresse: vscode
Cet outil formera automatiquement le code pour vous, VScode accédera au magasin de plug-in pour télécharger [Fondeur de code plus joli] cette fiche. Au mode de configuration 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 "
}
}Cet outil formulera automatiquement CSS, SASS, moins de code, et triera automatiquement l'ordre de CSS VSCODE.
{
"stylelint.enable" : true ,
"css.validate" : false ,
"less.validate" : false ,
"scss.validate" : false ,
"stylelint.autoFixOnSave" : true
}[Coût d'importation] Voir la taille du module dépendant que vous avez introduit
[TAGE DE CLOSE AUTO] Remplissez automatiquement les balises HTML, telles que l'entrée <a> se composera automatiquement </a>
[ <b> Renommer la balise </a> Renomme </b> la balise <a> .
