[Notice the APP at any time] The project is basically completed

01 Preface

1. Announce APP, project requirements and background analysis

2. Announce the progress of the APP

3. 04.12 Project progress

If you have n’t read my previous 三篇关于通告APPones, I suggest you click the link above ~~

02 text

It is now the sixth week of the weekend, 主要的业务功能基本完成oh ~

This course ended in the eighth week, because I have already gone to an internship, so the time invested in this APP has been reduced, but I will continue to maintain and improve it later in the period ~~

Let me continue to explain 通告APP的进度, this time mainly to say some details

The following mainly talks about the front end (client and management side) and the back end (server side) in the previous tweet, which is more detailed: click to understand the server side .

03 Client

Technology stack: vue + mintUI

Let ’s take a look at the client component tree as a whole and establish a global view

Starting from 0, new users log in after registering

After the new user logs in successfully, the page will look like this
home page 当前地区, and the notices sent by everyone will be displayed

The top left of the homepage will be located according to the user's IP to the user's city,
but the user can manually switch the region they want to see

Enter the city name and click Enter

Here is the dynamic acquisition, and then the following announcement is also in Foshan.
We can click the announcement, enter the details page, and then subscribe

When you click to subscribe, it will display the subscribed

You can like the announcement

After subscribing, the notice subscription page will be displayed

After the new user is registered, there is no authority
unless the new user applies and the application is successful, the announcement can be issued

The realization of the subscription function:

According to a js plugin opened by Sohu, get IP,

Get home city based on user IP in homepage

Use Gaode's public API to parse and return the city where the user's IP is located

New user default avatar is like this,
you can click to edit personal information to modify

After modification-the data will be saved to the database

New users can request access
rights can range to village

I downloaded this data from a github address, third-party open source crawling data: data link

Each level is an independent file, when you select the scope of authority to apply for

You can choose the upper and lower levels. The front end obtains the data of each level by accessing the background interface. The data is returned by the back end parsing the file

We go to the background for review

We can check before approval

After viewing, there is no problem with the role, we can pass the approval

After approval, this ordinary user is the authorized user.

With the permission, he / she can publish an announcement.
Click the icon to enter the announcement interface

We edited and used a plug-in here to achieve the function of rich text editing

手牵手, Let's go to the background to approve this notice

We can click the detailed button to view the details of the notice
and then we can approve it

After approval,
this notice can be displayed in the notice list.

If it is found later that this notice has bad places, such as not conforming to the facts or there is plagiarism, etc., you can disable this notice

The above is the
summary of the client. The functions of the client:

Are the screenshots not exciting? I recorded the dynamic ...

The registration effect is as follows

Home page automatic positioning, manually modify the address, the effect is as follows

Subscribe to like function, the effect is as follows

Modify personal basic information, the effect is as follows

Apply for permission function, the effect is as follows:

After the background approval is passed, he is the authorized user, and a notice can be issued.
Note: he cannot apply again after applying for the authorization

After our background audit is passed, we can show that the
above is the client's

Next we will look at the management side

04 Management side

Main technology stack: vue-element-admin

Management component tree

Function: Dynamic routing and rights management (It took two weeks to get it out ...)

• Administrator owns全部菜单权限
• The authorized user has部分菜单权限

Note: This menu permission in the sidebar is based on the user id, query the database, and dynamically generated according to the role of the user

Dynamic routing is a dynamically generated route based on the menu url list returned by the background

Reference: Implementation of Vue dynamic routing (back-end routing, front-end gets and generates sidebar)
Reference: Open source project> WEB application development> Back-end management framework

Management login

Administrator login
Administrator has full permissions

• User management (authorized users, ordinary users, authorized approval)
• Notice Management (Approval Notice, Notice List)
• Role management (role list)
• Authority management (menu management)

The screenshot is as follows:

Permission user login
permission User has partial permissions

• User management (authorization approval)
• Notice Management (Approval Notice, Notice List)

The screenshot is as follows: the

role can be added. The
role is managed by the administrator, and the role or the permissions of the role can be modified

For example, we can add a role: the secretary of the village committee

The function of giving him an approval announcement

is shown here.

For the permission menu, you can add, delete, and modify

.

database

• 用户与角色是一对一的关系After the user logs in, determine the user's role based on the user's id
• 角色和权限是多对多的关系, A role can have multiple permissions, a permission can be used by multiple users

According to the role to check the corresponding menu permissions, dynamically generate routing json and return to the background management system, through addRouter to dynamically render to the sidebar

The role is designed in this way. If the role applied by the user is other, such as party committee or secretary, then the role
can be added dynamically on the management side, and then the permissions are granted by the way.

to sum up

Personal ability is not enough, technology is limited, and the 完成了基本的大概的功能
management end comes from the secondary framework packaged by others, so the amount of code is abnormally much ... It ’s so refreshing to change ...

I 上下级关系那边的处理still feel not friendly enough ~~~
There are some small bugs in the management side, which will be fixed later, and there are some small functions in the client that can be improved, and will be gradually improved later.