disclaimer

This project is an imitation project, only for my own practice and learning to use, unofficial App, prohibited for all commercial purposes, all the legal consequences of infringing works, and the author has nothing to do with.Copy the code

Introduction to the

This project is a full-stack open source project of mobile terminal imitating the official website and background management system of King of Glory mobile terminal (PC terminal), based on Vue + node (Express + ElementUI) +mongodb. Deployed in Ali Cloud server, this project uses the latest Vue family bucket technology stack, and the background data is built through Node +mongodb.

This update mainly has the following three points:

  • Client Joiningbetter-scrollandmediaMedia inquiry, improve the experience;
  • Background Management addedvue-table-with-tree-gridTree form beautification classification management;
  • Nginx enables gzip to increase the loading speed

Source address:vue-wzry

Experience address: client background management

The server has expired 🙃, and the experience address is inaccessible

Ps: The database JSON file has been uploaded to the root directory of the server dump folder, clone this project, copy the dump folder to your MongoDB bin directory, run the following command to import the database.

mongorestore -d node-vue-moba -directoryperdb dump\irectoryperdb
Copy the code

The user name of the background management system is available:

The user name password permissions note
admin * * * * * * 1 Have all permissions
test 123456 2 Only read permission

If you need the admin account password, please add wechat: 856321Zjk

First, environmental preparation

  1. Install tools, set up the environment (nodejs, NPM,mongodb), and perform related configurations.

Ii. Project initiation

1. Star This project and clone it to the local

git clone [email protected]:JakeZhangZJK/vue--node-mongodb-wzry.git
Copy the code

2. Enter the project directory

cd vue-node-mongodb-wzry
Copy the code

3. Install dependencies

Install dependencies in the admin, Web, and Server folders

npm/cnpm install
Copy the code

4. Start the service

(1) Admin (background management system)

npm run serve
Copy the code

(2) Web mobile terminal

npm run serve
Copy the code

(Ensure that the database is connected)

npm run serve
Copy the code

(4) Build the production environment

npm run build
Copy the code

Run the above commands in the admin and Web directories respectively. The packaged static files are stored in the admin and Web folders in the server directory respectively.

Third, manage the background

  1. Build the basic interface of background management based on Element UI

Background management system has the following functions:

  1. Category Management (infinite series), addedvue-table-with-tree-gridBeautify management classification
  2. Equipment management
  3. Hero management
  4. Article management (where the editor uses a rich text editor (VUe2-Editor))
  5. Advertising management
  6. Administrator Account management (Bcrypt hashing)
  7. Local image upload (multer) and video upload
  8. List paging and fuzzy query
  9. The login module uses the interface (JWT, jsonWebToken) to verify the server login
  10. Client routing restriction (beforeEach, Meta)
  11. Simple permissions (new)
  12. Login verification for uploaded files (El-Upload, headers)

Ps: Use universal CRUD interface for all additions, modifications and checks; Through the middleware to match the front-end transmission route to add, delete, modify and check the corresponding

Route matching middleware

module.exports = () => { 
    returnAsync (req, res, next) => {// Model matching middleware // "resource" is a dynamic parameter used to match the corresponding resource        const modelName = require('inflection').classify(req.params.resource) // Request dynamic resource An inflection dependency package needs to be installed for class name conversionreq.Model = require(`.. /models/${modelName}`)
        next()
 } } Copy the code
// Introduce the resource matching middleware
  const resourceMiddleWare = require('.. /.. /middleware/resource.js')
 // Add a generic interface
  router.post('/'.async (req, res) => {
    const model = await req.Model.create(req.body)
 res.send(model)  })  // General modification interface  router.put('/:id'.async (req, res) => {  const model = await req.Model.findByIdAndUpdate(req.params.id, req.body)  res.send(model)  })  // Delete the interface in general  router.delete('/:id'.async (req, res) => {  await req.Model.findByIdAndDelete(req.params.id)  res.send({  success: true  })  })  // Generic get list interface  router.get('/'.async (req, res) => {  const queryOptions = {}  let pageNum = req.query.pageNum;  let pageSize = req.query.pageSize;  let count = await req.Model.find().count() / / the total number of article  let items = ' '  let obj = ' '  // For generality, we do not write the Category interface separately, because Category has to get the upper class specifically.  // So it is passed in as a dynamic parameter, which can be used for similar special requests in the future  if (req.Model.modelName === 'Category' || req.Model.modelName === 'Model') {  queryOptions.populate = 'parent'  }  if (pageNum) {  items = await req.Model.find()  .setOptions(queryOptions)  .skip(parseInt(pageSize) * parseInt(pageNum - 1))  .limit(parseInt(pageSize));  obj = {  count,  items  }  } else {  obj = await req.Model.find().setOptions(queryOptions).limit(count)  }  res.send(obj)  })  // Get a data interface in general  router.get('/:id'.async (req, res) => {  const model = await req.Model.findById(req.params.id)  res.send(model)  })  Copy the code

Fourth, mobile terminal website

  1. Use SASS (SCSS) to pre-define base styles (colors, font,margin,padding).
  2. The overall layout of the page using Flex, new media queries;
  3. The rotation diagram usesvue-awesome-swiperPlug-in;
  4. Part of the ICONS in the project are the official Sprite, and the rest use the font icon (Alibaba IconFont).
  5. Implement the generic list card componentcard, can be used for almost all TAB display except details page, has good reuse and expansion, convenient and fast.

Three modules are generally implemented:

Home page

  1. Home page news information and details page display
  2. Home page hero list and details page display
  3. Home text guide list and details page display
  4. Home wonderful video list and video play

Strategy center

  1. Strategy center (hero strategy, boutique column, competition, excellent video and text strategy 5 small modules) and details page display and video playback

Event center

  1. Event list and details page graphic display

5. Page GIF and partial screenshots

Background management

Web side

Source address:Github.com/JakeZhangZJ…

Remember Star ~😁

disclaimer

This project is an imitation project, which is only for practice and learning. It is an unofficial App, and it is prohibited to be used for commercial purposes. The author has nothing to do with any legal consequences arising from infringing works.