오늘의 톱기사 백엔드 관리 시스템 모방(一)

18022 단어 h5css
(1) 오늘의 톱기사 백그라운드 관리 프로젝트
01 - 프로젝트 - 간단한 소개
(오늘의 톱기사를 이해한다)의 백엔드 관리 시스템, 개인의 백엔드 관리 시스템, 기사 발표가 불편하기 때문에 이 PC의 시스템이 필요하다.
  • 로그인
  • 시작 페이지
  • 게시물
  • 소재 관리
  • 컨텐츠 관리
  • 팬 관리
  • 리뷰 관리
  • 개인 설정
  • 02 - 프로젝트 - 준비 작업
  • vue 베이스
  • vue 플러그인 vue-router
  • 데이터 axios
  • 필요
  • 백그라운드 커넥터 필요
  • UI 프레임워크element-ui를 사용하여 배고프세요 전단 팀 UI 구성 요소 라이브러리
  • vue 기반 프레임워크
  • PC 측의 백그라운드 관리 시스템 인터페이스를 신속하게 구축
  • vue-cli 2 버전
  • 3.0 버전 사용

  • 03-프로젝트 - 초기화
    는 3.0 버전의 초기화 항목입니다.
    설치:
    #            npm un vue-cli -g
    npm install -g @vue/cli
    

    초기화:
    vue create hm-toutiao-77
    

    단계:
  • 사용자 정의 창설 항목
  • babel은 ES6 구문 변환 플러그인입니다.
    linter 제약 코드 스타일 플러그인eslint
    css 프로세서
  • less라는 프로세서를 선택하십시오
  • 표준적인 문법 스타일 선택
  • 코드 검사 코드 스타일 저장 및 코드 검사 제출 및 복구 시도
  • 플러그인의 구성 정보를 개별 구성 파일에 기록
  • 뜻: 아까의 조작 기록을 저장하는지 여부는 나중에 새 프로젝트를 만들 때 직접 만듭니다.

  • 생성 후:
    프로젝트 디렉토리로 전환하여 시작 프로젝트 실행
    npm run serve
    

    액세스:http://localhost:8080... 하면 된다
    04 - 프로젝트 - 구조 설명
    외부 디렉토리 이해:
    주요 src 디렉토리:
    ├─api  #  axios
    ├─assets
    │  ├─fonts
    │  └─images
    ├─components #      
    ├─directive #  
    ├─filter #   
    ├─router #  
    ├─store #    
    ├─style #less
    └─views #      
    └─App.vue    
    └─main.js     
    

    05- 프로젝트 - 지점 관리
  • 마스터 상위 브랜치
  • 기타 지점 개발 기능
  • 분기 작용:
  • 1인분 기능 모듈을 각각 개발
  • 여러 사람이 서로 다른 지점을 가지고 동시에 개발하고 협동하여 개발한다.

  • https://gitee.com/stolenbytime/jay01
    프로젝트의 코드 위탁 관리github:
  • 원격 창고 창설 보증은 빈 창고
  • 로컬 창고 코드 제출:
  • #           
    git remote add origin [email protected]:zhousg/hm-toutiao-77.git
    #    origin  
    git push -u origin master
    

    06- 프로젝트 - 요소 ui 사용
    설치:
    # -S    --save    :               
    npm i element-ui -S
    

    전체 도입:
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    Vue.use(ElementUI);
    

    체크섬:
      <div id="app">
        App <el-button type="success">    el-button>
      div>
    

    07 - 프로젝트 - vscode를 설정하는 eslint 플러그인
    설치:
    구성:
    "eslint.validate": [
            "javascript",
            "javascriptreact",
            {
                "language": "html",
                "autoFix": true
            },
            {
                "language": "vue",
                "autoFix": true
            }
        ],
        "eslint.autoFixOnSave": true,
    

    설정 버튼 - 오른쪽 위 구석 - - - 에 내용을 추가합니다.
    08- 프로젝트 - vue-router 사용
    설치:
    # npm 5.0         -S --save
    npm i vue-router 
    

    router의 초기화 코드를 정의하려면:
    //   router       main.js  
    import VueRouter from 'vue-router'
    import Vue from 'vue'
    
    Vue.use(VueRouter)
    
    const router = new VueRouter({
      //       
      routes: []
    })
    
    export default router
    
    

    vue 루트 실례에서router 대상 마운트
    // @           src       vue-cli          
    //             index.js         .js .vue .json
    import router from '@/router'
    
    new Vue({
    +  router,
      render: h => h(App)
    }).$mount('#app')
    

    09 - 프로젝트 - 라우팅 규칙 분석
    라우팅 규칙 규약:
    경로
    기능
    라우팅 수준
    /login
    로그인
    1단계 라우팅
    /
    첫 페이지
    1단계 라우팅
    ├─/welcome
    시작 페이지
    2단계 라우팅
    ├─/article
    컨텐츠 관리
    2단계 라우팅
    ├─/image
    소재 관리
    2단계 라우팅
    ├─/publish
    기사 게시
    2단계 라우팅
    ├─/comment
    평론 관리
    2단계 라우팅
    ├─/fans
    팬 관리
    2단계 라우팅
    ├─/setting
    개인 설정
    2단계 라우팅
    10 - 로그인 모듈 - 라우팅 및 구성 요소 생성
    새로운 기능을 시작합니다.
  • 분기git branch login 만들기
  • 분기 전환 git checkout login
  • coding(작은 기능 하나 완성할 때마다 코드 제출)
  • 마스터 분기 전환 git checkout 마스터
  • 결합 분기git merge login
  • 어셈블리를 생성하려면 다음과 같이 하십시오.
    <template>
      <div class='container'>Logindiv>
    template>
    
    <script>
    export default {}
    script>
    
    <style scoped lang='less'>style>
    
    

    라우트를 구성하려면 다음과 같이 하십시오.
    //       
    // name              $router.push('/login')     $router.push({name:'login'})
      routes: [
        { path: '/login', name: 'login', component: Login }
      ]
    

    출구 정의:
      <div id="app">
        <router-view>router-view>
      div>
    

    11 - 로그인 모듈 - 기본 레이아웃
    <template>
      <div class='container'>
        <el-card class="my-card">
          <img src="../../assets/images/logo_index.png" alt="">
        el-card>
      div>
    template>
    
    <script>
    export default {}
    script>
    
    <style scoped lang='less'>
    .container{
      position: absolute;
      width: 100%;
      height: 100%;
      //       /       contain               cover            
      background: url(../../assets/images/login_bg.jpg) no-repeat center / cover
    }
    .my-card{
      width: 400px;
      height: 350px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-60%);
      img{
        display: block;
        width: 200px;
        margin: 0 auto;
      }
    }
    style>
    
    

    참고: index.less 파일 쓰기 전역 스타일
    import '@/style/index.less'
    

    ###12-style 태그의 scoped 역할
  • scoped작용역작용범위
  • 스타일의 스타일은 현재 구성 요소에서만 적용됩니다
  • https://vue-loader.vuejs.org/zh/guide/scoped-css.html

  • 원리:
  • 데이터-v-37dfd6fc 속성은 현재 구성 요소가 노출된 탭에 자동으로 추가됩니다
  • 현재 구성 요소의 고유한 ID
  • 검색:
  • .container -----> .container[data-v-37dfd6fc]

  • 현재 어셈블리 레이블에 없는 스타일을 수정하는 경우
  • 전역 스타일 수정

  • 13 - 로그인 모듈 - 양식 그리기

    좋은 웹페이지 즐겨찾기