Download:Learn Scala to navigate the Spark ecosystem for big data
If you want to learn more about big data, Scala is a must-learn. It’s your starting point to becoming a high-paying programmer. There are a lot of classes and presentations about Scala, but few that focus on producing real-world applications like this, so don’t miss it.
Suitable for people who want to systematically learn Scala and want to better and more in-depth learn the popular framework of big data (Spark&Kafka&Flink, etc.) partners who want to transform big data partners
Technical skills are required to have a programming background in one language
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
! [] ()