practise vue shop front
1.0.0
مشروع كود للتعلم من دورة Dark Horse Front-End Element لعام 2019.
قبل استخدام هذا المشروع، يوصى بتعلم vue.js أولاً. هذا الشيء هو عتبة التعلم لإطار عمل عنصر واجهة المستخدم. لا تتعجل لتحقيق النجاح السريع
فهرس مشروع الخادم الخلفي الذي يدعم هذا المشروع: learnVue_shop يدعم مشروع واجهة برمجة تطبيقات الخادم
واجهة API الخلفية المستخدمة في هذا المشروع هي واجهة API الخلفية العامة التي تقدمها جمعية Luo Tianyi Conservation Association
العنوان الرسمي للدورة التدريبية لـ Dark Horse Front-End:
عنوان مشروع الواجهة الأمامية: http://shop.liulongbin.top/
عنوان الواجهة الخلفية: https://www.liulongbin.top:8888/api/private/v1/
مستند واجهة API: الرابط: https://pan.baidu.com/s/1KJPfaFaPadW4JdGjCt54NQ كود الاستخراج: mgbr
قم بتنزيل المجموعة الكاملة من الدورات: الرابط: https://pan.baidu.com/s/1hBwZLR-Wbjt28YSEzVi6AQ كود الاستخراج: 2urn
ملاحظة: يجب أن يحتوي عنوان الواجهة الخلفية على رمز مميز لإرسال واستقبال الطلبات بشكل طبيعي، يرجى متابعة الدورة التدريبية للمشروع لمعرفة المزيد.
يرجى عدم حذف البيانات بشكل عشوائي إذا قمت بحذفها، يرجى إضافتها مرة أخرى. عند حذفها، يرجى ترك واحدة أو اثنتين في القائمة. خاصة بالنسبة لجزء أذونات الدور، إذا تم حذف جميع بيانات الأذونات، فلن يتمكن الطلاب الذين قاموا بهذا الجزء من المتابعة. نصيحة أخرى، إذا لم تكن هناك بيانات، يمكنك الانتقال إلى موقع المشروع وإضافة بعض البيانات.
مستخدمو المحطة ب: واجهة API الخلفية العامة المقدمة من جمعية Luo Tianyi Conservation Association
اسم المستخدم: كلمة المرور المشرف: 123456
عنوان نموذج المشروع لجمعية Luo Tianyi Conservation Association: 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 إلى متجر المكونات الإضافية لتنزيل المكون الإضافي [Prettier - Code formatter] بعد اكتمال التثبيت، افتح vscode [ملف]-->[التفضيلات] -->[الإعدادات] وابحث عن json يوجد رمز صغير في الركن الأيمن العلوي من صفحة الإعدادات. انقر للتبديل إلى وضع تكوين json إذا كان لديك تكوينات أخرى لمشروع eslint ولا تريد استبدال هذه القاعدة، يمكنك نسخه إلى ملف التكوين الخاص بـ [مساحة العمل]، ولا تحتاج إلى استبداله بتكوين [المستخدم]) انسخ ملف 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 تلقائيًا. تحتاج إلى الانتقال إلى متجر المكونات الإضافية لتنزيل تكوين JSON المحدد لهذا البرنامج الإضافي. فيه على النحو التالي
{
"stylelint.enable" : true ,
"css.validate" : false ,
"less.validate" : false ,
"scss.validate" : false ,
"stylelint.autoFixOnSave" : true
}[تكلفة الاستيراد] تحقق من حجم الوحدات التابعة التي قدمتها
[علامة الإغلاق التلقائي] إكمال علامات html تلقائيًا إذا قمت بإدخال <a> فسيتم إكمالها تلقائيًا </a>
[Auto Rename Tag] إعادة تسمية علامات html تلقائيًا إذا تم تغيير <a> إلى <b> ، فسيتم تغيير علامة النهاية </a> تلقائيًا إلى </b>
