Reminder before watching: Source code, database, and experiment report are at the end of the article.
This small Web software system is based on a picture-sharing imitation Weibo social platform, where users can view the content shared by others and publish their own content at the same time. In browsing and sharing posts, users can perform operations such as likes, comments, and favorites. In the personal center interface, users can modify personal information, modify the permissions of shared content (whether likes and comments are allowed), and view favorited content. Administrators can also log in to the background management system to prohibit or re-allow registered users to share content.
1. Overall design scheme.
1.1 Home page : All users can access it, and preview the content shared by all users here, as well as like list and recently released content. You can jump to the details page by clicking on the shared post, and you can jump to the personal center by clicking on the personal avatar. If you are an administrator, you can also click on the relevant button to jump to the background management system.
1.2 Content details page : users can see all the content of the post here, and at the same time, they can like, collect, comment and reply to comments.
1.3 Personal center page : users can modify personal information (avatar, email, password), Modify the permissions of your own content (whether you can like, comment, and view), publish your own content, and view your favorite shares. 1.4
Background management system page : Only administrators can access this page, and administrators can prohibit or re-allow registration Users share content.
Technology stack : Mysql+Vue+Nodejs+ElementUI+echarts
Main running screenshots:
User registration:
Upload avatar (no more than 60kb):
Personal page:
Default user password is 123456
Administrator account: admin Password: 123456
Ordinary user account 1: user Password: 123456
Ordinary user account 2: user1 Password: 123456
Ordinary user account 3: 123456 Password: 123456
Main interface: Allow users to like, comment, and bookmark , including likes list, latest topics
Allow second-level comments
Search keyword "beautiful"
Administrator interface: (set is_admin in blog_users table to 1)
Set user identity, whether to allow sharing
Some screenshots and content of the experiment report:
the software system adopts front-end and back-end Separation method:
(1) Front end:
1. dist —— The default output directory after the project is built and packaged.
The dist folder does not exist initially in a new project. It will only be created after you have executed a build command (build). Its internal directory structure is:
├── dist //The output directory after the project is built
│ └── css
│ └── img
│ └── js
│ └── index.html // The main entry file of the project
│ └─ ─ ... // Other public resources
2. node_modules —— Project dependency files, including many basic dependencies and self-installed dependencies.
├── node_modules
│ └── …
3. public —— store the main entry file index.html of public resources and projects. The public folder stores the public resources of the project. For example, the website LOGO, etc., there will also be the main entry file index.html of the project. Usually we don't need to make any changes to the resources in the public folder.
├── public
│ └── index.html // Project main entry file
│ └── ... // Other public resources
4. src —— project core folder: including project source code, various static resources, etc. It is the key working directory of our development.
├── src
│ └── assets //static resources
│ └── components //public components
│ └── plugins //plugin resources
│ └── router //routing configuration
│ └── store //vuex file
│ └── views //view component
│ └── App.vue //root component
│ └── main.js //entry file
5. .gitignore —— the file directory that needs to be ignored when Git uploads;
6. package-lock .json - the file used for version management;
7. package.json - the basic configuration information file of the project, including various plug-ins, dependencies and detailed configuration of some dependencies;
8. README.md - the description file of the project .
The entire vue scaffolding directory is:
├── dist //The output directory after the project is built
├── node_modules
│ └── … // various dependencies
├── public
│ └── index.html // project main entry file
│ └── … // other public resources
├── src
│ └── assets //static resources
│ └── logo.png
│ └── components //public components
│ └── HelloWorld.vue
│ └── plugins //plugin resources
│ └── axios.js
│ └── router // Routing configuration
│ └── index.js
│ └── store //vuex file
│ └── index.js
│ └── views //view component
│ └── About.vue
│ └── Home.vue
│ └ ── App.vue //root component
│ └── main.js //entry file
├── tests //optional: test module
├── .gitignore //list of files to be ignored when Git uploads
├── package -lock.json //The file used for version management
├── package.json //The basic configuration information file of the project
├── README.md //The description file of the project
├── … //Other dependent independent configuration information files
Examples of backend interfaces:
- Registration
Brief description:
User registration interface
Request URL:
/api/regUser
Request method:
POST
return example:
{ "status": 1, "message": "Registration successful" } - Login
Brief description:
User login interface
Request URL:
/api/login
Request method:
POST
return example:
{ "status": 1, "message": "login successful", "token": Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NCwidXNlcm5hbWUiOiJUd2lsaWdod CIsInBhc3N3b3JkIjoiIiwibmlja25hbWUiOiLlirPln4PlvrfCt-emj -adsCIsImVtYWlsIjpudWxsLCJhdmF0YXIiOiIiLCJpc19zaGFyZSI6MSwiaXNfYWRtaW4iOjAsImlhdCI6MTY1MTg0OTUwOCwiZXhwIjoxNjUxODg1NTA4fQ.suBEHiyCLuDFDGrGWrteoW6zSLhhQx hdrLwNUeeH-TM" } - 获取分享列表
简要描述：
· 获取分享列表
请求URL：
· api/article/list
请求方式：
· GET
Header:
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NCwidXNlcm5hbWUiOiJUd2lsaWdodCIsInBhc3N3b3JkIjoiIiwibmlja25hbWUiOiLlirPln4PlvrfCt-emj-adsCIsImVtYWlsIjpudWxsLCJhdmF0YXIiOiIiLCJpc19zaGFyZSI6MSwiaXNfYWRtaW4iOjAsImlhdCI6MTY1MTg0OTUwOCwiZXhwIjoxNjUxODg1NTA4fQ.suBEHiyCLuDFDGrGWrteoW6zSLhhQxhdrLwNUeeH-TM
URL参数：
· 无
返回示例：
{ “ status”: 1, “message”: “Obtaining the sharing list successfully”, “data”: [ { “id”: 4, “user_id”: 3, “content”: “The Skeleton Knight is in the fantasy world adventure”,
“pictures”: “\uploads\upload_file-1651748956331;\uploads\upload_file-1651748956350”,
“pub_date”: “2022-05-05 19:09:16.358”,
“view_num”: 0,
“like_num”: 1,
“comment_num”: 2,
“is_view”: 1,
“is_like”: 1,
“is_comment”: 1,
“is_delete”: 0
},
{
“id”: 5,
“user_id”: 3,
“content”: “间谍过家家”,
“pictures”: “\uploads\upload_file-1651827732307;\uploads\upload_file-1651827732328”,
“pub_date”: “2022-05-06 17:02:12.350”,
“view_num”: 0,
“like_num”: 0,
“comment_num”: 0,
“is_view”: 1,
“is_like”: 1,
“is_comment”: 1,
“is_delete”: 0
}
]
}
Running tutorial:
(It is recommended to start the backend first, and then start the frontend)
1. The database is imported
. Log in to the database, open sqlyog, and after the connection is established, create the database blog_db
and choose to execute the sql script
Successful execution
2. Backend startup tutorial
Open folder
Open the serve folder and the dependencies
already exist, so just start the back - end node app.jsproject directly
npm i less -loader@5 less
npm i
npm run serve
Copy the link and open it in your browser
Source code and database acquisition:
百度云链接：https://pan.baidu.com/s/13ewwWQi38uW4hfuKSn7w4w?pwd=ni75
提取码：ni75
If the link fails, you can also add cynm-2233 to get it, the code word is not easy, don't forget to like it~~