practise vue shop front
1.0.0
Un proyecto de código para aprender del curso Dark Horse Front-End Element de 2019.
Antes de utilizar este proyecto, se recomienda aprender vue.js. Este es el umbral de aprendizaje del marco de la interfaz de usuario del elemento. No esté ansioso por lograr un éxito rápido
Índice del proyecto de servidor back-end que respalda este proyecto: learnVue_shop que respalda el proyecto de API del servidor
La interfaz API de backend utilizada en este proyecto es la interfaz API de backend pública proporcionada por la Asociación de Conservación Luo Tianyi.
Dirección oficial del curso Dark Horse Front-End:
Dirección del proyecto front-end: http://shop.liulongbin.top/
Dirección de la interfaz de backend: https://www.liulongbin.top:8888/api/private/v1/
Documento de interfaz API: Enlace: https://pan.baidu.com/s/1KJPfaFaPadW4JdGjCt54NQ Código de extracción: mgbr
Descargue el conjunto completo de cursos: Enlace: https://pan.baidu.com/s/1hBwZLR-Wbjt28YSEzVi6AQ Código de extracción: 2urn
Nota: La dirección de la interfaz de backend debe tener un token para enviar y recibir solicitudes normalmente. Siga el curso del proyecto para obtener más información.
No elimine datos al azar. Si los elimina, vuelva a agregarlos. Cuando los elimine, deje uno o dos en la lista. Especialmente para la parte de permisos de roles, si se eliminan todos los datos de permisos, los estudiantes que hayan completado esta parte no podrán continuar. Otro consejo: si no hay datos, puede ir al sitio web del proyecto y agregar algunos datos.
Usuarios de la estación b: interfaz API de backend pública proporcionada por la Asociación de Conservación Luo Tianyi
Nombre de usuario: administrador Contraseña: 123456
Dirección de ejemplo de proyecto de la Asociación de Conservación Luo Tianyi: http://gl.timemeetyou.com
En caso de que la interfaz falle o el usuario sea eliminado, puedes chatear en privado con él para restaurar la base de datos.
# 克隆项目
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 中继续处理
--> 登陆成功¿Por qué usarlo de esta manera? Por ejemplo, si la interfaz API en segundo plano cambia temporalmente, solo necesitamos modificar la variable URL del archivo request.js en la carpeta de red para cambiar globalmente la interfaz API, lo cual está en línea con la idea de modularización y es más conveniente. para la gestión de códigos. También es más conveniente reutilizar los métodos 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 ;
}
}Dirección de descarga: vscode
Esta herramienta formateará y organizará automáticamente el código. vscode vaya a la tienda de complementos para descargar el complemento [Prettier - Code formatter]. Una vez completada la instalación, abra vscode [Archivo]-->[Preferencias]. -->[Configuración] y busque el json en Hay un pequeño ícono en la esquina superior derecha de la página de configuración. Haga clic para cambiar al modo de configuración json. Si tiene otras configuraciones de eslint del proyecto y no desea reemplazar esta regla. Puede copiarlo al archivo de configuración de [Espacio de trabajo], no necesita reemplazarlo con la configuración de [Usuario]) Copie el siguiente json al archivo de configuración
{
"[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 "
}
}Esta herramienta formateará y organizará automáticamente CSS, sass y menos código, y ordenará automáticamente el orden de CSS vscode. Debe ir a la tienda de complementos para descargar [stylelint-plus] La configuración JSON específica de este complemento. en es el siguiente
{
"stylelint.enable" : true ,
"css.validate" : false ,
"less.validate" : false ,
"scss.validate" : false ,
"stylelint.autoFixOnSave" : true
}[Costo de importación] Verifique el tamaño de los módulos dependientes que introdujo
[Etiqueta de cierre automático] Complete automáticamente las etiquetas html. Si ingresa <a> se completará automáticamente </a>
[Renombrar etiqueta automáticamente] Cambiar el nombre de las etiquetas html automáticamente. Si <a> se cambia a <b> , la etiqueta final </a> se cambiará automáticamente a </b>
