download:Deployment landing + business migration play advanced K8S and enterprise practical skills
As early as the end of 2017, Kubernetes became the de facto standard in container choreography, and today, the ecology around Kubernetes continues to explode. In addition to Google, BAT, JINGdong, Meituan and other giants, more and more small and medium-sized Internet enterprises are also migrating to Kubernetes. Container technology is becoming a necessary skill for development/operation engineers and architects. This course from cluster deployment to business migration, continuous integration and then to the core knowledge point combing, not only can help students who are interested in Kubernetes related work to do the basic guide, but also can help engineers who have a certain basis to quickly achieve K8S production landing, less detour, avoid stepping on the pit.
This course is suitable for back-end engineers, architects and DevOps engineers with certain work experience, as well as students with relevant technical reserves. Technical reserves are required to be familiar with basic Shell syntax, understand common Docker commands, and be familiar with JavaWeb programming
Create a login page. Delete useless initializers!
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
2) Component redirection The meaning of redirection is well understood, but Vue redirection is used in different paths but the same component situation, for example:
routes: [
{
/
Home page
/
path: ‘/main’,
name: ‘main’,
component: Main,
},
{
/
Back to the home page
/ path: ‘/goHome’, redirect: ‘/main’},] : /goHome redirects to /main. /goHome redirects to /main.
Use words, only need to set up the corresponding way;
Redirect -> home page 5, routing form and 404 1) routing form
There are two routing modes
Hash: indicates a path with the # sign, for example, http://localhost/#/login history: indicates a path without the # sign, for example, http://localhost/login. The code is as follows: index.js
export default new Router({ mode: ‘history’, routes: [ ] }); 2) Handle 404
Create a view component called NotFound. Vue with the following code:
Fix the routing configuration with the following code:
import NotFound from ‘.. /views/NotFound’