Online experience Address:vip.52tech.tech/

Making the source code:Github.com/xiugangzhan…

Project preview

  • The main page
  • The login page
  • The sign-up page
  • The member center
  • Movie playing page
  • Movie bullet screen function

The video website project has been completed with the following functions:

V1.0.3 (current version)

    1. Add automatic capture function, website data regular real-time update
    • Movie and TV series data capture
    • Movie data information front-end display
    1. Automatic capture, download and display of pictures on movie pages
    1. Code structure adjustment

v1.0.2

    1. Simplified the program installation process and added a visual installation interface
    • Users can directly enter the database name, database address, database user name, and database password information to complete the program installation
    1. Part of the page structure adjustment

v1.0.1

    1. User center management
    • You can modify the basic information of registered users
    • Change the user password
    • View user comment records
    • Users can view and play favorite movies
    • View user login logs
    1. Movie Search function (feature function)
    • Realize the search and play function of the whole network video according to the video playing address and video name
    • Implement a list of current releases, upcoming releases and TOP250 movies
    • Movie favorites and cancel functions
    1. Bullet screen function (featured function)
    • Similar to the bullet screen function of other video websites such as WEBSITE B, users can make online speeches after logging in

v1.0.0

    1. Setting up the user homepage:
    • It realizes the display and switch of the homepage carousel chart. The user can configure and switch the carousel chart display freely from the database
    • Realize the display of the movie list on the home page: read the movie and TV list information from the database file and display it in the foreground
    1. Setup of user login and registration page:
    • Realized the user login and registration function
    • User registration and login verification code prompt function
    1. Build the movie playing page
    • For any page that can display the movie list on other pages, the user can directly click the list to enter the play page
    • Play page movie details displayed
    • For videos with slow loading speed, users can freely switch the playback interface to accelerate them
    • Users can view the comments made by other users in the corresponding play page, and can also post comments freely after logging in

other

    1. The overall style of the page mimics the layout of Discuz and other forum sites
    1. The rotation picture effect of the homepage imitates the rotation picture effect of youku, IQiyi, Tencent Video and other mainstream video websites, and encapsulates the effect of this part
    1. The friendship link at the bottom of the movie uses the column layout of most websites. Users can add their own QQ groups and wechat public accounts to increase the popularity of their websites
    1. The pagination function of the main list, for some contents that are displayed more than one page can not be displayed in a complete page, the use of Ajax without refreshing pagination for multiple data display, improve the user experience
    1. There have also been tests on major browsers, and we recommend that you use Google or Firefox, which may work better
    1. No other third-party frameworks are used. The home page and play page are pure native HTML, CSS and JS implementations (for this xframe-min-1.0.js file, please refer to my GitHub xframe.js open source project).
    1. Movie playing page: This is similar to the playing page of the current mainstream website. The left side is the playing window, and the right side is the detailed information of the movie
    1. Bottom navigation: use the way of column to achieve the bottom navigation, the front for the friendship link, the back for the site’s wechat, Q Weibo and other contact information
    1. User center: this part realizes the function of changing password, commenting, logging in, log management, and collecting movies. Users can switch freely

Program directory structure description

vip.github.io: ├─ ├─ exercises, controllers, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises ├─ exercises, ├─ WWW // ├─ ├─ CSS // style sheets // ├─images // ├─ WWW // ├─views // ├─ WWW // ├─ ├─ CSS // style sheet ├─ HTML // HTML file ├─images // ├─js // javascript // search page movielist │ ├─ ├─components // soon │ ├─ CSS // style sheet ├─ HTML // ├─images // ├─ javascript // search page movielist │ ├─ ├─components // soon │ ├─ ├─ movie // ├─ movie //Copy the code

Program Installation Method

    1. Make sure the NodeJS environment is installed on your computer, keep the version up to date (V8 or above), select a local path, and run the following command:
   git clone https://github.com/xiugangzhang/vip.github.io.git
Copy the code
    1. Go to the home directory of the application (the folder containing app.js) and run the command: NPM install. The system will automatically install the dependency packages of the application.
    1. Once all the above steps are complete and correct, you can run the command in the program’s home directory (the directory with app.js)
   node app.js
Copy the code

Then it will automatically open the main interface of the program installation in the browser;

    1. If the Windows environment, this program provides a visual installation. The user can enter the database name, database host address, database user name, database password in the installation interface of the program, then click the button to install immediately, in the case of all the input parameters are correct, the platform will automatically install the program, after successful installation will automatically jump to the home page of the website;
    1. If the OS is Linux, prepare the database name (database=video), database host ADDRESS (host=localhost), database user name (user=root), and database password (password=123456). Save as config.properties file in the following format. Make sure the configuration information here is exactly the same as your database configuration information.
    database=video               
    host=localhost          
    user=root               
    password=123456         
Copy the code
    1. Online demo site: VIP.52tech.tech
    1. If you have any questions or suggestions in the process of installation and use, you are also welcome to communicate and make suggestions. You can initiate a topic discussion on “Issue”, or directly contact email: [email protected]