Use Node's hands to teach you how to write a tutorial website (follow the response style), including the front-end content and background management system, integration of Express framework and Monodb database server development; teach you how to use Vue.JS, ElementUI and iViewUI to write super beautiful pages.
- This project is originally created by the author, please leave a message or contact the author before reprinting!!!
If it helps you, please give a star. Thank you.~ github address
Technology stack
- Backend: Express + Mongodb + passport-jwt + JSON webtoken, and so on
- Front end: Vue.JS + ElementUI + iViewUI + Axios, etc.
testing environment
VSCode + Node8.9.4 + Google(75.xxx) + VueCli(3.7.0)
Function introduction
- Learning the knowledge on the website
- Search function
- Message function
- View Video Function
- Enjoy songs
- Article management
- Daily check-in
- Purchasing Course Order Management
- Back-stage management
- Wait...
Project design
-- Background Basic Architecture Node-Vue-App ├── README.md ├── server.js -- Background File Entry ├── test.http -- Test file ├── api -- Routing file │ ├── admin.js -- Configuration Administrator's Operations │ ├── article.js -- Configuring related operations of articles | ├── index.js -- Configure Home Page Data | ├── messagewall.js -- Configuring Message Community | ├── music.js -- Configuration of song information | ├── user.js -- Record user information,Configuring User's Related Operations | └── vipcourse.js -- To configure VIP Relevant Operation of Courses ├── config -- configuration file | ├── Date.js -- Configure date Formatting Plug-in | ├── http.js -- Configure cross domain | ├── keys.js -- To configure token Visa key | └── MongodbURI.js -- To configure Mongodb Some information ├── model | └── ** -- Custom database Mongodb Model ├── mongodb | └── mongodb.js -- To configure Mongodb,Link database ├── passport | └── passport.js -- Verification token Legitimacy ├── static | └── ** -- Static File Storage ├── client | └── ** -- (Vue)Front-end Page Architecture
-- Front-end Page Architecture Client ├── README.md ├── public | ├── index.html -- vue Mount page | └── ** -- You can link a few static resources here ├── src -- Development Folder | ├── App.vue -- Vue Mount the root page | ├── http.js -- To configure http,Response interception operation | ├── main.js -- Vue Program entry file,Mount various components | ├── router.js -- Vue Routing Profile | ├── store.js -- Vuex State management file | ├── assets | | └── ** -- Store static resources | ├── components | | └── pcnav.vue -- Navigation bar | ├── myplugin -- Configuration plug-ins | | ├── Date.js -- format date | | └── Loading.js -- Loading animation | ├── store -- State store | | ├── adminstore.js -- Administrator status | | ├── musicstore.js -- Song information | | ├── searchstore.js -- search message | | └── userstore.js -- User information | ├── views -- pagefile | | ├── search.vue -- Search page | | ├── NotFound.vue -- 404 page | | ├── Home.vue -- Main page | | ├── Index.vue -- Front end front page | | ├── adminPage -- Administrators | | | ├── adminindex.vue -- Backstage home page | | | ├── adminlogin.vue -- Background login page | | | ├── adminnav.vue -- Background navigation bar | | | ├── index.vue -- Background root mount point | | | ├── mainarea.vue -- Background page main area mount point | | | └── components -- Background component | | | | ├── addarticle.vue -- Add article | | | | ├── buycourselogs.vue -- Purchasing Course Records | | | | ├── communitymessage.vue -- Community message | | | | ├── cssmessage.vue -- VIP curriculum css Leaving a message. | | | | ├── editcss.vue -- edit CSS Article | | | | ├── edithtml.vue -- edit HTML Article | | | | ├── editjavascript.vue -- edit Javascript Article | | | | ├── homepagedata.vue -- Front Home Page Data Management | | | | ├── htmlmessage.vue -- VIP curriculum html Leaving a message. | | | | ├── jsmessage.vue -- VIP curriculum JavaScript Leaving a message. | | | | ├── loginlog.vue -- Login log | | | | ├── managemusic.vue -- Song management | | | | ├── manageusers.vue -- user management | | | | ├── operationlog.vue -- Operation log | | | | ├── registerlog.vue -- Registration log | | | | ├── signlog.vue -- Check-in log | | | | ├── specificarticles.vue -- Bill management | | | | ├── vipcoursecss.vue -- VIP(css)Administration | | | | ├── vipcoursehtml.vue -- VIP(html)Administration | | | | └── vipcoursejs.vue -- VIP(js)Administration | | ├── coursePage -- Article display | | | ├── css.vue -- css Article | | | ├── html5.vue -- HTML Article | | | └── javascript.vue -- Javascript Article | | ├── userPage -- User page | | | ├── aboutme.vue -- author | | | ├── enjoymusic.vue -- appreciate a composition | | | ├── messagewall.vue -- Community message | | | ├── userinfo.vue -- personal data | | | ├── userlogin.vue -- User login | | | ├── userregister.vue -- User registration | | | └── vipcourse.vue -- see VIP curriculum | | └── vipCoursePage -- VIP Course page | | | ├── csscourse.vue -- css | | | ├── htmlcourse.vue -- html | | | └── javascriptcourse.vue -- javascript ├── babel.config.js -- babel To configure └── vue.config.js -- vue configuration file
<br/>
Introduction to Project Testing
- This project uses 3001 port in the background and 8080 port in the front.
- You need to test in an environment with Node and Vue. If one of them is not available, download it first.( Node Download,Vue Download).
- Download dependencies: npm install downloads back-end dependencies, then enters client, npm install downloads front-end dependencies.
- Configuration database: Please restore the packaged JSON file to the Mongodb database. Please correspond to the address and database name of the Mongodb configuration. You can also customize the address and database name, one by one.
- After the above work is completed, use the command node server &command to start the Node server, the successful start will show:
**Server is running on port [3001].
**Mongodb is contected. - Enter the client, open the command board, use the command NPM run server to start vueCli-server, default use 8080 port, access http://localhost:8080 with browser after successful start-up, if the home page data display is successful, then prove that the data and program start successfully.
- In this example, Mongodb is deployed on a local computer. If you read this document carefully, it should be easy to start the project. If you deploy Mongodb elsewhere, please modify the config/mongodbURI.js configuration file information yourself.
- Only after completing the above steps can the project be started, otherwise the project will report an error because it cannot connect to Mongodb.
Get ready
passport-jwt and JSON webtoken
JSON webtoken is a token that encrypts user's information into irreversible cracking. about passport-jwt, it is used to verify the expiration of token information brought by user's request. If it exceeds the legal time of visa, the front desk will send token invalid information to prompt the user to retrieve the legal token information, otherwise it can not continue to request the encrypted information.
- jsonwebtoken
// Set token // rule const rule = { id:String(userinfo._id), username:userinfo.username, email:userinfo.email, date:user.date, signdate:userinfo.signdate, signcount:userinfo.signcount, avatar:userinfo.avatar, phone:userinfo.phone }; // Visa encryption // Jwt.sign (rule, key (private key), {configuration: such as expiration time}, (err, token) {response program}) jwt.sign(rule,key,{expiresIn:7200},(err, token) => { if(err) throw err; res.json({"token" : "Bearer " + token}) })
- passport-jwt
const key = require("../config/keys").KEYORSECRET; const JwtStrategy = require('passport-jwt').Strategy, ExtractJwt = require('passport-jwt').ExtractJwt; var opts = {} opts.jwtFromRequest = ExtractJwt.fromAuthHeaderAsBearerToken(); opts.secretOrKey = key; module.exports = passport => { passport.use(new JwtStrategy(opts, (jwt_payload, done) => { UserInfo.findById(jwt_payload.id) .then(user => { if (user) { return done(null, user); } else { return done(null, false); // or you could create a new account } }) })); }
Detailed document address: Passport-Jwt Validation,token encryption
<br/>
svg-captcha
The application of svg-captcha verification code can prevent violent decryption and enhance security.
Detailed document address: svg-captcha
Using Verification Codes
// Background Generation Verification Code router.get("/getCaptcha", (req, res) => { var captcha = svgCaptcha.create({ // Flip color inverse: false, // font size fontSize: 38, // Number of noise lines noise: 3, // width width: 80, // height height: 32, }); // Save to session, ignoring case and case req.session = captcha.text.toLowerCase(); console.log(req.session); //Verification code generated by 0xtg //Save to cookie to facilitate front-end call validation res.cookie('captcha', req.session); res.setHeader('Content-Type', 'image/svg+xml'); res.send(String(captcha.data)); res.end(); }) // Front desk access verification code --HTML <img width="80" style="background:#EEE9E9;margin-left:30px;" ref="captcha" height="32" src="http://localhost:3001/api/user/getCaptcha" @click="refreshCaptcha"> --js // Get the authentication code cookie getCookie(cname){ var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++){ var c = ca[i].trim(); if (c.indexOf(name)==0) return c.substring(name.length,c.length); } return ""; }, // Refresh Verification Code refreshCaptcha(){ this.$refs.captcha.src = "http://localhost:3001/api/user/getCaptcha?d=" + Math.random(); }, //Finally, the verification codes are filled in for comparison.
Console
<br/>
Paging use of Vue and ElementUI
For more details on ElementUI paging, see: ElementUI Paging Learning
-- html <el-pagination v-if='paginations.total > 0' :page-sizes="paginations.page_sizes" :page-size="paginations.page_size" :layout="paginations.layout" :total="paginations.total" :current-page.sync='paginations.page_index' @current-change='handleCurrentChange' @size-change='handleSizeChange'> </el-pagination> -- js data(){ return{ allUsers:[], // To store the final information, the displayed dom point call allTableData:[], // Users accept paging settings paginations: { // Paging component information page_index: 1, // Which page is currently on? total: 0, // Total page_size: 5, // How many items are displayed on page 1 page_sizes: [5, 10, 15, 20], //How many items are displayed per page? layout: "total, sizes, prev, pager, next, jumper" // Page properties }, } }, methods:{ // Get the current page handleCurrentChange(page) { let sortnum = this.paginations.page_size * (page - 1); let table = this.allTableData.filter((item, index) => { return index >= sortnum; }); // Setting default paging data this.getAllUsers = table.filter((item, index) => { return index < this.paginations.page_size; }); this.getAllUsers = table.filter((item, index) => { return index < this.paginations.page_size; }); }, // Switch size handleSizeChange(page_size) { this.paginations.page_index = 1; this.paginations.page_size = page_size; this.getAllUsers = this.allTableData.filter((item, index) => { return index < page_size; }); }, // PageCount setPaginations() { this.paginations.total = this.allTableData.length; this.paginations.page_index = 1; this.paginations.page_size = 5; // Setting default paging data this.getAllUsers = this.allTableData.filter((item, index) => { return index < this.paginations.page_size; }); }, }
No? Yes, pagination is so simple! Have you learned it? Some students who develop front-end are always unfamiliar with pagination, learn this, so that you will not have trouble!
For other special and complex functions in the project, please test before learning. The code annotation is very clear. If you don't understand, please see the contact information below.
<br/>
Project screenshots
- Home page (lazy loading)
- HTML tutorial
- Message wall
(This PC terminal is modeled on a Daniel's blog. Daniel Blog Address ) The mobile terminal is written by itself.
- Enjoy songs
- Search songs
- Daily check-in
- Personal information
- VIP course
VIP courses include HTML,CSS,JS courses; VIP users can comment on messages, can delete their messages; only users log in and pay to buy before viewing. (For reference only)
- Search page
Paging function
- 404
Background interface
Background home page uses Echarts, data visualization, API is really powerful. More about Echarts learning, Baidu search oh~
- Add article
- Editing articles
- Order management
- Song management
Wait
There are no more project presentations here. If you like or want to continue to expand on this project, you can visit them. github project address
This project is originally created by the author. Please leave a message or contact the author before reprinting.
If it helps you, please give a star. Thank you.~ github address
<br/>
Communication
If you are interested, Welcome star Welcome to my front-end communication group: 866068198, to exchange and learn the front-end technology. Bloggers are currently self-learning Node, technology is limited, if possible, will try to provide you with some help, or some learning methods.
contact
If you have some questions after you see this article, you can contact me or you can find some info by clicking these links.
If it helps you, please give a star. Thank you.~ github address