Project Introduction

project description

Lok Mall is a footwear products for the online trading platform, suitable to wear, it does not, change. Lok pay for your return logistics costs, with the fastest speed the exchange of good shoes to your hands, the best brands, the lowest price. Scouring ethnic music with strong financial strength and integrity of the accumulation of e-commerce industry, international big depth cooperation with Nike, Adidas, Converse, NewBalance and so on. To ensure that the products and stores updated simultaneously, so you can not see the house as quickly buy the new season designer shoes. Le Amoy family adhere to self, to reduce intermediate links, Rangli to the user, so all product prices are lower than traditional sales channels.

Features

Backend management (pc end)

Log function / exit function (bootstrap-validator) based form validation plugin for bootstrap
Home function modules (echarts)
User management function (bootstrap-paginator)
Category management function (jquery-fileupload)
Merchandise management functions

Shows a front end (movable end)

Home (mui framework)
User login page
Category page (a classification and sub-categories)
Search Page
Product display page
Product Details page
Shopping cart page
Personal center of the page

Project architecture

Development model

Back-end rendering mode

Front-end write static pages, rendering to the back-end, back-end data preparation, rendering the page.

Disadvantages:

Rendering work to the back-end, back-end need to understand the knowledge front end.
Front and rear ends of responsibility tangled.

Exploitation Interface (front end of the separation mode)

Front-end write static pages, rendering the page, the back end is only responsible for providing data and interfaces.

advantage:

Front and rear ends of responsibilities clear, clear division of labor.

Environment to build

Installation node

When the trailing edge separating the development of the former, you first need to localize with a good development environment, that need to build back-end development environment locally. Since we are using the background nodejs, so we need to set up nodejsenvironment

Download node installation package (official website to download it)
Double-click the installation (recommended installation on the C drive, easy to find)
In the cmd command line input node -vand npm -vsee if the installation was successful

Acquisition project code

It has provided letao.zip folder

Download the code to extract the D root directory (directory anywhere, but relatively easy to find the root directory of the best directories without Chinese)
In the D:\letaoOpen cmd directory, execute npm i, then the project has been initialized good

Database initialization

Use database visualization software, database initialization, database file reference letao初始化.sql.

Note the character set: UTF-8

Modify the database configuration

Presentation folders

Modify modules folder db.jsfile

const pool  = mysql.createPool({
    host : '127.0.0.1',//主机地址，不用改
    user : 'root',//用户名，不用改
    password : 'root',//密码,填写自己数据库的密码
    database : 'letao'//数据库名，不用改
});

Startup project

First you start mysql server
Use npm startstart the project, after starting the window can not be closed.

Mobile end mall page views: HTTP: // localhost: 3000 / Mobile

Back-end management page views: HTTP: // localhost: 3000 / the Manage

The only administrator account: root unique administrator password: 123456

注意：项目启动后窗口不能关闭，如果项目报错了，需要重启服务

Use git project management

git initInitialize the project
git add .Add code
git commit -m '项目初始化'Submit code
Creating a warehouse in github, used to store project code
Setting warehouse Alias:git remote add origin [email protected]:jepsongithub/letao.git
The code is pushed onto github:git push origin master

pc-management system

All the code we have written to the back-end management system backfolder below

Build a rack backstage management system (css image js)

Log function

Open branches:git branch login

Switching branches:git checkout login

In login Log in development function, and other functions developed after the code into the master branch.

Static pages

Set the background color for the login page#222d32
The use of panel components
Use the button assembly

Use the various components for bootstrap

栅格系统
面板组件（带标题）
表单组件
按钮组件

Submit code to login branch

Use bootstrap-validator plug-in

Validation rules:

Username can not be empty
User password can not be empty
User password length is 6-12

Referring to the document: "bootstrap-validator use notes .md"

$form.bootstrapValidator({
    //设置小图标
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
  
  //设置校验规则
  fields:{
    
    username:{
        validators:{
            notEmpty:{
                message:""
            },
          	stringLength:{
                min:6,
              	max:12,
              	message:""
            }
        }
    },
    password:{
        
    }
    
  }
  
});

Form validation is successful, the success of the event registration form validation, to prevent the default submit, submit using ajax

$form.on("success.form.bv", function(e){
  //阻止表单的默认提交
  e.preventDefault();
  //使用ajax进行提交
  $.ajax({
    type:"",
    url:"",
    data:{},
    dataType:"json",
    success:function(data){
      
    }
  });
})

Processing the response result

If this is success, need to jump to Home
If the error is
- If the error is 1000, prompting the user to name wrong
- error is 1001, suggesting that the password is wrong

$form.data("bootstrapValidator").updateStatus("username", "INVALID", "callback")Dynamic change state

Reset function

When you click the Reset button, you also need to reset the form of error messages.

$("[type='reset']").on("click", function(){
  
  //重置表单样式
  $("form").data("bootstrapValidator").resetForm();
  
});

git operation

Submit code to login branches merge into the master branch

Progress bar

//注册了全局事件，所有的ajax只要开始就会开启进度条
$(document).ajaxStart(function () {
  NProgress.start();
});

//所有的ajax只要结束，延迟500毫秒，结束进度条
$(document).ajaxStop(function () {
  setTimeout(function () {
    NProgress.done();
  }, 500);

});

Full end electricity supplier (a)