practise vue shop front Download - practise vue shop front Source Code скачать

practise vue shop front

Другие категории

1.0.0

Скачать

Практике-версию-тос-фронт

представлять

Следуйте программе кода для курса Front End Enlect Dark Horse 2019 года.

В настоящее время рекомендуется сначала изучить Vue.js. Не работай

Этот проект поддерживает индекс проекта сервера Back -End:

Фоновый интерфейс API, используемый в этом проекте

Dark Horse Front -Официальный адрес курса:

Адрес проекта фронта: http://shop.liulongbin.top/

Back -end Интерфейс Адрес: https://www.liulongbin.top: 8888/api/private/v1/v1/

Документ интерфейса API: Ссылка: https://pan.baidu.com/s/1kjpfafapadw4jdgjct54nq код извлечения: mgbr

Загрузите полный набор курсов: ссылка: https://pan.baidu.com/s/1hbwzlr-wbjt28ysezvi6aq Код извлечения

Примечание. Адрес интерфейса Back -End должен иметь токен для отправки и получения запроса.

Пожалуйста, не удаляйте данные. Особенно в ролевых разрешениях студенты, которые удаляют данные о разрешениях, не могут продолжать делать это.

Благодарность

Пользователь станции B: общедоступный интерфейс API за кулисами, предоставленный Ассоциацией защиты Luo Tianyi

Имя пользователя: пароль администратора: 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

Часть этого проекта оптимизирована

Различные документы в проекте разделены на 6 основных модулей в соответствии с текущими общими модульными привычками интернет -компаний, а различные файлы принадлежат всем видам документов

 - 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配置文件

Все запросы API в этом проекте инкапсулируются в папке Network и больше не выполняют запрос Axios в файле .vue.

 // 以login.vue 为例
执行 login ( ) 方法
--> 到network/login下找到login请求
--> 引用 request.js 封装的axios 方法
--> 请求到数据返回到login.vue 中继续处理
--> 登陆成功

Зачем использовать это? Например, если интерфейс фонового API временно изменяется, нам нужно только изменять переменные URL файла request.js в папке Network, чтобы изменить интерфейс 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, меньше кода и автоматически сортирует порядок VSCODE CSS.

{
  "stylelint.enable" : true ,
  "css.validate" : false ,
  "less.validate" : false ,
  "scss.validate" : false ,
  "stylelint.autoFixOnSave" : true
}