practise vue shop front 다운로드 - practise vue shop front 소스 코드 다운로드

practise vue shop front

기타 카테고리

1.0.0

다운로드

practice-vue-shop-front

소개하다

2019 다크호스 프론트엔드 요소 강좌에서 배울 수 있는 코드 프로젝트입니다.

이 프로젝트를 사용하기 전에 먼저 vue.js를 학습하는 것이 좋습니다. 이것이 요소 UI 프레임워크의 학습 임계값입니다. 빠른 성공을 바라지 마라

이 프로젝트를 지원하는 백엔드 서버 프로젝트의 인덱스: learnVue_shop 지원 서버 API 프로젝트

본 프로젝트에 사용된 백엔드 API 인터페이스는 Luo Tianyi Conservation Association에서 제공하는 공개 백엔드 API 인터페이스입니다.

다크호스 프론트엔드 공식 코스 주소:

프론트엔드 프로젝트 주소: 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

참고: 요청을 정상적으로 보내고 받으려면 백엔드 인터페이스 주소에 토큰이 있어야 합니다. 자세히 알아보려면 프로젝트 과정을 따르세요.

데이터를 임의로 삭제하지 마시고, 삭제하신 경우에는 다시 추가해 주시기 바랍니다. 특히 역할 권한 부분의 경우 권한 데이터가 모두 삭제되면 이 부분을 수행한 학생들은 계속할 수 없습니다. 또 다른 팁은 데이터가 없으면 프로젝트 웹사이트에 가서 일부 데이터를 추가할 수 있습니다.

감사의 말

스테이션 b 사용자: Luo Tianyi Conservation Association에서 제공하는 공개 백엔드 API 인터페이스

사용자 이름: admin 비밀번호: 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 요청은 네트워크 폴더에 캡슐화됩니다. Axios 요청은 더 이상 .vue 파일에서 이루어지지 않습니다. Vue의 캡슐화 아이디어에 따라 반환 데이터만 vue에서 처리됩니다.

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

왜 이런 식으로 사용합니까? 예를 들어, 백그라운드 API 인터페이스가 일시적으로 변경되는 경우 네트워크 폴더에 있는 request.js 파일의 url 변수만 수정하면 API 인터페이스를 전체적으로 변경할 수 있습니다. 이는 모듈화 아이디어에 부합하고 더욱 편리합니다. 코드 관리를 위해 또한 API 메소드를 재사용하는 것이 더 편리합니다.

user 모듈에서는 재사용된 컴포넌트 중 일부를 추출하여 하위 컴포넌트로 변환해 보았고, 부모-자식 컴포넌트 통신, 형제 컴포넌트 통신이라는 개념을 추가했습니다. 이는 일반적인 개발에서 많이 사용됩니다. usersChildren의 형제 구성 요소 관계와 userCildren과 사용자의 상위-하위 구성 요소 간의 통신을 신중하게 고려하고 노력할 수 있습니다.

 // 加入了$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을 찾으세요. 설정 페이지의 오른쪽 상단에 작은 아이콘이 있습니다. 다른 프로젝트 eslint 구성이 있고 이 규칙을 바꾸지 않으려면 클릭하세요. [Workspace] 구성 파일에 복사하면 되며, [User] 구성으로 대체할 필요는 없습니다.) 구성 파일에 아래 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
}