download:Java from single to micro services to create a real estate sales platform
Microservices is a very popular architecture in recent years and is a required skill for senior backend developers. Based on the real estate sales platform, this course will first take you through the development of individual units, then carry out the transformation of micro-service architecture, and deeply analyze the principles of micro-service architecture. Quickly improve your project development and microservices architecture skills to better advance towards the direction of senior development engineer and architect. Suitable for people and technical reserve requirements for students who are willing to engage in Java development in the future, and Java server engineers who have worked for 1-3 years. By fully mastering the course content, you will be able to master Java development framework, microservices technology, architecture design, component implementation principles, back-end development technology architecture ability, and be qualified for back-end Java senior development position, up to 3-5 years Java engineer level
2. Create the login page. Delete the useless initialization things!
1) Create the following construct in the source directory
Assets: Used to store resource files Components: Used to store Vue functional components views: Used to store Vue view components Router: Used to store vue-Router configurations! [] ()
2) Create home view: Create a view component named main. vue in the views directory
3) Create Login page view: Create a view component named login. vue in the views directory, where el-… Is the ElementUI component;
4) Create route: Create a vue-router route configuration file named index.js in the router directory
Import Vue from ‘Vue’ // import Vue import VueRouter from ‘vuue -router’ // import Main from “.. /views/Main” import Login from “.. /views/Login” // device routing vue. use(VueRouter); // Configure the routing plug-in export default new VueRouter({/
Mode – Route type 1)hash: path with # http://localhost/main#/ 2)history: path without # http://localhost/main
/
mode: ‘history’,
routes: [
{
/
Home page
/
path: ‘/main’,
name: ‘main’,
component: Main,
},
{
/
The login page
/ path: ‘/login’, name: ‘login’, Component: login}]}
Import Vue from ‘Vue’ //Vue component import App from ‘./App’ //App component import VueRouter from ‘vue-router’ // Routing component import router Import ElementUI with CSS import ElementUI from ‘element-ui’; import ElementUI from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’; Vue.use(VueRouter) vue. use(ElementUI); New Vue({el: ‘#app’, router, // configure route render: h => h(app) // enable ElementUI}); 6) Fix app. vue component code
7) Test: Open http://localhost:8080/#/login in reader
Error: it may be a compilation error caused by the high version of sass-Loader. The highest version is 8.x, and the requirement is reverted to 7.3.1.
Json file, change the version of “sas-loader” to 7.3.1, and then re-install CNPM.
! [] ()
A nested routine is also called a child route. In practical applications, it is usually composed of multi-layer nested components. Similarly, the dynamic paths in the URL correspond to nested layer components according to certain constructs, for example:
/user/foo/profile /user/foo/list
+——————+ +—————–+
User
User
+————–+
+————-+
Profile
+————>
list
+————–+
+————-+
+ — — — — — — — — — — — — — — — — — — + + — — — — — — — — — — — — — — — — — + 1) user information components, in the views/user to create a directory called Profile. The vue view components;
2) User List component, create a view component named list. vue in views/user directory;
3) Configure nested routines by modifying the index.js routing configuration file in the router directory, as shown in the code
Import Vue from ‘Vue’ // import Vue import VueRouter from ‘vuue -router’ // import Main from “.. /views/Main” import Login from “.. /views/Login” import UserList from “.. /views/user/List” import UserProfile from “.. /views/user/Profile” // device routing vue. use(VueRouter); Export default new VueRouter({mode: ‘history’, // mode: routes: [{/
The home page
/
path: ‘/main’,
name: ‘main’,
component: Main,
children: [
/
List of users
/
{path: ‘/user/list’, component: UserList},
/
The user information
/
{path: ‘/user/profile’, component: UserProfile}
]
},
{
/
The login page
/ path: ‘/login’, name: ‘login’, Component: login}]}
4) To fix the home page view, we fix the main. vue view component, which uses ElementUI to plan the container component, as follows:
Clarification: the element is configured to display nested routines, mainly using personal information to display nested routines content
! [] ()
We often need to map all routes that are matched in some form to the same component. For example, we have a User component that will be used to render all users with different ids. At this point we need to pass parameters;
- Fixed route configuration by adding :id placeholder in path attribute
/
The user information
/
{path: ‘/user/profile/:id’, name: ‘user_profile’, component: UserProfile}
- Transmission parameters
To is changed to :to in order to use this attribute as an object. Note that the title of the name attribute in router-link must match the title of the name attribute in route, so that Vue can find the corresponding route.
The user information
- Accept parameters, in the destination component
{{$route.params. ID}} 1) Use props
- Fixed route configuration, adding props: True
{path: ‘/user/profile/:id’, name: ‘user_profile’, component: UserProfile, props: true }
-
The transfer parameters are the same as before
-
The accept parameter adds the props property for the target component