Home>ASP source code>Other categories
Download

Project introduction

Alibaba Baixiu, a content management system, is divided into two core functions: content management and content display.

1. Function module

1.1 Content Management

module Function
user Login, logout, user addition, deletion, modification and query
article Article management
Classification Classification management
Comment Comment management
Website settings Keywords, description, website logo, carousel image

1.2 Content display

module Function
front page Navigation, article data display
List page Display a list of articles by category
Details page Display article details and implement comment function

2. Development mode

2.1 Mixed development model of front-end and back-end

All HTML code and data are spliced ​​on the server side, and all content is sent to the client at once. The browser executes the code and presents the content to the user.

02

question:

  1. Front-end and back-end developers are not familiar with each other's code. It is very difficult for mixed development to deal with each other's code.
  2. During the development process, codes will inevitably overlap each other, doubling the workload.

2.2 Front-end and back-end separation development model

03

Advantages: clear responsibilities and division of labor, independent development, no influence on each other.

3. Project structure

System layering Use technology
data layer mongoDB
service layer node.js (express)
client art-template, jQuery, font-awesome, swipe

4. Setting up the project operating environment (things you must know to run the project)

  1. Install the node.js software and test whether it is installed successfully
    1. Win + R opens the running program in the Windows system, enter powershell in the running program and press Enter to open the command line program
    2. Enter the node -v command to check the version of node.js. If the version number is output in the command line program and no error is reported, the installation is successful.
  2. Install mongodb and mongodb-compass software
  3. Copy the Alibaba Baixiu project folder to the hard disk (server-side program)
  4. Go to the project root directory in the command line tool
    1. Hold down the shift key, right-click and select Open PowerShell window here
  5. Use the npm install command to install the dependency files required for the project
  6. Open the app.js file and modify the database connection section on line 47: 'mongodb://itcast:itcast@localhost:27017/alibaixiu'

​ for 'mongodb://localhost:27017/alibaixiu'

​ (1) Reason: You did not create the mongodb database connection account and password information. We chose to use the default method to log in to the mongodb database.

​ (2) If you want to log in to the database with your account and password. Please refer to: https://www.cnblogs.com/b02330224/p/10049395.html

Enter the commands in sequence on the command line: use alibaixiu #Enter alibaixiu database

db.createUser({user:'itcast',pwd:'itcast',roles:['readWrite']}) #Create database user

​ If you are prompted that the permissions are insufficient, please refer to the link above and log in to the database with the mongodb administrator account first.

7. (New step) Recently, the db_data database data has been uploaded, and the alibaixiu database can be entered through the mongodb-compass software.

Create users , comment , slides , categories , posts , settings collections with the same name as the json data in the db_data folder

​ (Collection), and finally import the corresponding json data in each collection in turn.

importdata

8. Enter node app.js in the command line tool to start the project

5. Things to note after running the project (things you must know to run好看的项目)

1. Open the browser and enter localhost:3000/admin/login.html in the browser address bar to enter the login page.

Enter the system default username: (original) [email protected] (now) [email protected] Password: 123456 Enter the administrator page

2. Since the database file is not uploaded, all data needs to be added manually (if the json data in db_data is introduced, skip steps 2-10)

3. Enter the administrator page and first change your account information (change password, etc.) and upload user avatar.

4. Then add article information, system setting information, and carousel image information (the order is not required, adding means filling in the form information, selecting image files, etc.)

5. Note that when changing the classification information, the icon of the classification information needs to be searched on font-awesome, such as: fa-phone, fa-gift, etc.

The image class name format searched in font-awesome is: fa fa-xxx-xxx, you only need to add the fa-xxx-xxx part at the end.

6. After adding the basic database information, you can choose to log out and register a new user (the registered user defaults to an ordinary user)

Or use the administrator's add user rights to add ordinary users.

7. After the background data is added, use a normal user account to enter the front-end article display page (if you want the page content to be richer

It is recommended to add about 15 pieces of article information and about 4 pieces of category information)

8. If you want to use the administrator account to enter the website, do not log out of the administrator account. Open a new tab in the browser

Enter localhost:3000 in the address bar to enter the front article display page

9. If the administrator turns on the comment function, the comment function will be displayed on the front article details page. If the administrator turns off the comment function, the comment function will be displayed on the front article details page.

The page does not display the comment function

10. If the administrator turns on the comment review function, the user's comments will not be displayed on the page immediately, and the administrator needs to be in the background

Comments are reviewed on the management page and will be displayed on the article page only after they are approved. If the administrator turns off the comment function, the

It will be displayed on the article details page.

11. If the project still cannot run, please contact me at 1565066165

6.Project address

Home page: http://luoxu.ltd:3000/ (temporarily changed to http://luoxucoder.icu during domain name registration)

Login page: http://luoxu.ltd:3000/admin/login.html (Similarly)

Project effect display

1. Front-end article display page

index

2. Front-end article classification page

category

3. Front-end article details page

post

4. Login page

login

5. Registration page

register

6.Backend management page

admin

Project function

1. User functions

1.1 Login

  1. Add click event for login button
  2. Get the username and password entered by the user in the text box
  3. Verify whether the user has entered the user name and password. If not, prevent the program from executing downwards and prompt the user to enter the user name and password.
  4. Call the interface that implements the login function. If the login is successful, it will jump to the home page of data management. If the login fails, it will prompt that the user name or password is incorrect.

1.2 Login interception

  1. Use the script tag to load the interface address provided by the server
  2. Determine the value of the isLogin variable. If the value is false, jump to the login page.

1.3 Add user

  1. Add a name attribute to each form item that adds user functions, and the name attribute value needs to be consistent with the parameter name required in the interface document.
  2. Bind the submit event to the form and prevent the form from being submitted by default in the event handler function.
  3. Obtain the content entered by the user in the form in the event handler function
  4. Call the add user interface and send the obtained content to the server through the interface. If the operation is successful, the page will be refreshed. If the operation fails, a user prompt will be given.

1.4 Display user list

  1. Send an Ajax request to the server to request user list data
  2. The second step is to use the template engine to splice the data and html template.
  3. The third step is to display the spliced ​​content on the page

1.5 User avatar upload

  1. Add an onchange event to the file selection control and obtain the file selected by the user in the event handling function.
  2. Create a formData object to upload image files
  3. Call the image file upload interface to implement image upload
  4. Add a new hidden field in the add new user form and store the image address in the hidden field

1.6 User list display

  1. Send an Ajax request to the server when the page loads to request user list data
  2. Use a template engine to splice data and html templates
  3. Display the spliced ​​content on the page

1.7 Modification of user information

  1. Add events for edit button clicks through event delegation
  2. Obtain the ID value of the current clicked user in the event handling function
  3. Obtain the user's detailed information based on the user id, and render the user's detailed information into the form on the left through the template engine
  4. Add a click event for the modify button, obtain the content entered by the user in the form in the event processing function, and call the modify user information interface to implement the user information modification function.

1.8 Delete user

  1. Add click event for delete button
  2. Confirm whether the user wants to delete the operation
  3. Get the ID of the currently clicked user
  4. Call the delete user interface to delete the user based on the ID. If the deletion is successful, refresh the current page so that the page displays the latest content.

1.9 Delete users in batches

  1. Manage checked status of checkboxes
    1. When the Select All button is selected, all users are selected; when the Select All button is deselected, all users are deselected.
    2. When the check box button state in front of the user is changed, check whether any user is unselected. If so, uncheck the select all button. If not, it means that all users are in the selected state. At this time, Select all button set to selected state
  2. Manage the status of bulk delete buttons
    1. When the Select All button is selected, the Batch Delete button is displayed. When the Select All button is deselected, the Batch Delete button is hidden.
    2. When the check box button state in front of the user changes, check the selected status of all users. If any user is selected, display the batch delete button. If all users are not selected, hide the batch delete button.
  3. Implement batch deletion of users function
    1. Add a click event to the batch delete button. In the click event processing function, store all selected user IDs in an array.
    2. Call the delete user interface to implement the user delete function

1.10 Change password

  1. Add a name attribute to each form item in the password change form. The value of the name attribute must be consistent with the parameter name in the interface.
  2. Add a form submission event to the password change form, and in the event handler function, prevent the form's default submission behavior
  3. Get the content entered by the user in the form
  4. Call the password modification interface to implement the password modification function. If the password is modified successfully, jump to the login page and allow the user to log in again.

1.11 Display logged in user information

  1. According to the value of the userId variable, obtain the information of the currently logged in user from the server.
  2. Display user information on the left side of the page

2. Classification function

2.1 Add category

  1. Add a name attribute to each form item in the form. The value of the name attribute must be consistent with the parameter name required in the interface document.
  2. Add a form submission event to the form, and in the event handler function, prevent the default behavior of form submission
  3. Get the content entered by the user in the form
  4. Call the category adding interface to implement the adding category function

2.2 Classified data display

  1. Send an Ajax request to the server to request category page data
  2. Use a template engine to splice the data returned by the server with the HTML template
  3. Display the spliced ​​content on the page

2.3 Modification of classified data

  1. Add a click event to the edit button through event delegation, and obtain the classification data ID to be modified in the event processing function.
  2. Call the interface according to the id to obtain detailed information of the classified data
  3. Use the template engine to splice classified data and HTML characters. After the splicing is completed, the content will be rendered into the page.
  4. Add a click event to the modify button, and obtain the content entered by the administrator in the form in the event handler function
  5. Call the modified classification data interface to implement the classification data modification function.

2.4 Classified data deletion

  1. Add a click event to the delete button through event delegation, and the delete confirmation box pops up in the click event handler.
  2. After the user clicks to confirm the deletion, obtain the ID of the classified data to be deleted.
  3. Call the deletion category data interface to implement the function of deleting category data. If the category is deleted successfully, refresh the page.

3. Article function

3.1 Add article

  1. Obtain article classification data and display the data in the drop-down list of the category for the administrator to select
  2. Upload the article cover image and save the uploaded image address in a hidden field
  3. Add a name attribute to each form item in the add article form, and the name attribute value must be consistent with the parameter name required in the interface
  4. Bind the form submission event to the add article form, and prevent the form from being submitted by default in the event handler function.
  5. Get the content entered by the administrator in the form
  6. Send a request to add an article to the server to implement the article adding function. After the article is added successfully, it will jump to the article list page.

3.2 Article list data display

  1. When the page comes up, send a request to the server for article list data.
  2. Use the template engine to splice the article list data and HTML. After the splicing is completed, the content will be displayed on the page.
  3. Implement list data paging function based on paging data

3.3 Article data list filtering

  1. Send a request to the server to request article classification data and display the data in the drop-down list of the category to which it belongs.
  2. Add a click event to the filter button and obtain the content selected by the user in the event handler function
  3. Send a request to the server to request the article list data requested by the administrator and display the data on the page

3.4 Article editing

  1. Add a link to the edit button and pass the article id as the query parameter of the link to the article edit page
  2. Get the id parameter in the address bar on the article editing page
  3. Get article details based on id and display the article information in the article editing form
  4. Bind the form submission event to modify the article form, and prevent the form from being submitted by default in the event handler function.
  5. Get the content entered by the user in the form
  6. Send a request to the server to implement the function of modifying article information. If the article information is modified successfully, jump to the article list page.

3.5 Article deletion

  1. Add a click event for the delete button through event delegation, pop up a delete confirmation box in the event processing function, and confirm the delete operation with the administrator
  2. Get the id of the article to be deleted in the event handler function
  3. Send an Ajax request to perform the deletion operation. The deletion operation is successful and the page is refreshed.

3.6 Popular article recommendations

  1. Send a request to the server for popular recommendation data

  2. Use a template engine to splice data and html templates, and display the spliced ​​content on the page 

     var str = '<div>{{name}}</div>' ;
var obj = { name : '张三' }
var html = template . render ( str , obj ) ;

3.7 Article search

  1. Bind the form submit event to the search form
  2. Prevent the default submission behavior of the form in the event handler and obtain the search keywords entered by the user
  3. Jump to the search results page and pass the search keywords entered by the user to the search results page
  4. In the search results page, the keywords entered by the user are obtained from the query parameters in the address bar.
  5. The search interface is called according to the search keywords entered by the user. When the server returns the data, the search result data and the HTML template are spliced, and the spliced ​​content is finally displayed on the page.

4. Comment function

4.1 Comment list display

  1. Send a request to the server to obtain the comment list data
  2. Use a template engine to splice the comment list data and HTML template, and then display the content on the page after the splicing is completed.
  3. Implement paging function based on paging data

4.2 Comment moderation

  1. Change the text in the moderation button based on the current comment's status. If the current comment is not reviewed, the button will display Approval; if the current comment is reviewed, the button will display Dismiss.
  2. Add a click event to the review button through event delegation, and obtain the status of the current comment in the event handling function
  3. Send a request to the server and tell the server what state the comment should be changed to. If the modification is successful, refresh the page so that the latest data is displayed on the page.

4.3 Comment deletion

  1. Add a click event to the delete button through event delegation, and pop up the delete confirmation box in the event handling function
  2. Get the id value of the comment that the administrator wants to delete
  3. Send a request to the server to delete the comment. If the comment is deleted successfully, refresh the page.

5.Carousel chart function

5.1 Add image carousel data

  1. Implement the image upload function and save the uploaded image address in a hidden field
  2. Add a name attribute to each form item in the image carousel form. The value of the name attribute must be consistent with the parameter name required in the interface.
  3. Bind the form submission event to the image carousel form, and prevent the form from being submitted by default in the event handler function.
  4. Get the content entered by the administrator in the form
  5. Send a request to the server to implement the function of adding image carousel data. If the data is added successfully, refresh the page.

5.2 Carousel chart data display

  1. Send a request to the server for image carousel list data
  2. Use a template engine to splice the image carousel list data and the HTML template. After the splicing is completed, the content will be displayed on the page.

5.3 Image carousel data deletion

  1. Add a click event to the delete button through event delegation
  2. Pop up the delete confirmation box in the event handler function
  3. Get the ID of the carousel image data to be deleted
  4. Send a request to the server to perform the deletion operation. The deletion operation is successful and the page is refreshed.

5.4 Carousel chart data display (updated)

  1. Send a request to the server for carousel data
  2. Use a template engine to splice data and HTML strings, and display the spliced ​​content on the page
  3. Move the original JavaScript code that implements the carousel effect to the end of the success function of the ajax method

6. Website setting function

6.1 Website settings

  1. Implement the uploading of website logo images and save the uploaded image address in a hidden domain
  2. Add a name attribute to each form item in the form. The value of the name attribute must be consistent with the parameter name required in the interface document.
  3. Bind the submit event to the form and prevent the form from being submitted by default in the event handler function.
  4. Get the content entered by the administrator in the form
  5. Send a request to the server to implement the function of adding website setting data

6.2 Display website setting data

  1. Send a request to the server to obtain website setting data
  2. Determine whether the data returned by the server is true. If it is true, display the data in the form.

7. Website latest update function

7.1 The page displays article comment information

1. Search the comments of the article according to the article ID

2. Approved comments will be displayed directly on the page

3. The latest comments have been optimized

4. Unapproved comments on the management page will be marked red

7.2 Page optimization

1. All like buttons implement the like function

2. The comment link implements the function of jumping to the comment article

3. All classification buttons implement the function of jumping to the classification page

7.3 Registration page

1. Added a user registration button to the login page

2. js on the registration page implements basic verification of front-end registration information

3. Page functions developed using bootstrap

4. All users registered on the registration page are ordinary users

5. Implemented the function of finding users based on their email addresses

For details, refer to the interface documentation

Expand
Additional Information
Related Applications
Recommended for You
Related Information All