"一切分离都是为了更好的结合,本文详细介绍了前后端架构分离之后,前端如何实现路由的控制,即Vue路由系统——VueRouter.

VueRouter下载地址(默认最新版本):https://unpkg.com/vue-router@3.0.1/dist/vue-router.js

@


VueRouter实现原理:

根据锚点值的改变,修改组件内容.

我们先来看看不使用VueRouter,自己实现路由的控制,如下代码:

<body>
<div id="app"></div>
<script>
let oDiv = document.getElementById('app');
window.onhashchange = function () {
// vue-router的实现原理是根据锚值的改变来对页面进行切换
switch (location.hash) {
case '#/login':
oDiv.innerHTML=`<h1>我是登陆页面</h1>`;
break;
case '#/register':
oDiv.innerHTML = `<h1>我是注册页面</h1>`;
break;
// 输入其他路径将显示为首页
default:
oDiv.innerHTML = `<h1>我是首页</h1>`;
break;
}
};
console.log(location.hash);
</script>
</body>

测试效果如下图:



可以看到,通过改变锚点值,页面跳转到我们需要的内容.

再来看看VueRouter实现路由的控制:

<body>
<div id="app"></div>
<script>
// 第一步:在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Register = {
template: `
<div>
<h1>我是注册页面</h1>
</div>
`,
};
let App = {
// 第四部:监听a标签的锚点值的改变
// 下面的router-link会渲染成a标签,to为标签的href属性,to后面是router中定义的路径
// 下面的router-view是页面内容的渲染出口
template: `
<div>
<router-link to="/">首页</router-link>
<router-link to="/login">登陆</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 第二步:实例化一个router对象(本质上是将路径和页面绑定了对应关系)
let router = new VueRouter({
routes: [
// 注意:routes,不是routers
{
path: '/',
component: Home,
},
{
path: '/login',
component: Login,
},
{
path: '/register',
component: Register,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 第三步:在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>

测试效果如下图:



路由命名

方式一:

通过在vue-router对象中增加name属性来指定路由名称.

调用方式:v-bind:to={ name: "路由名称" }

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Register = {
template: `
<div>
<h1>我是注册页面</h1>
</div>
`,
};
let App = {
// 下面的router-link会渲染成a标签,to为a标签的href属性,to后面的name指定的是路由别名
// 下面的router-view是页面内容的渲染出口
// 通过v-bind绑定定义的路由名称, v-bind:to="{ ... }", 可简写为:to="{ ... }"
template: `
<div>
<router-link v-bind:to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登陆</router-link>
<router-link :to="{ name: 'register' }">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
// 注意:routes, 不是routers
routes: [
{
// 路由命名
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'register',
path: '/register',
component: Register,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>

方式二:

<body>
<div id="app"></div>
<script>
Vue.use(VueRouter);
let App = {
template: `
<div>
<router-link to="/">首页</router-link>
<router-view name="header"></router-view>
<router-view name="footer"></router-view>
</div>
`,
};
let router = new VueRouter({
routes: [
{
path: '/',
components: {
header: {
template: `
<div>头部</div>
`,
},
footer: {
template: `
<div>底部</div>
`,
},
},
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
router: router,
components: {
App,
},
});
</script>
</body>


路由参数

<body>
<div id="app"></div>
<script>
/*
在真实的场景中,有以下两种路径形式:
1. xx.html/users/1
2. xx.html/users?userId=1
*/
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是主页面</h1>
</div>
`,
};
let userParams = {
template: `
<div>
<h1>我是用户1的信息</h1>
</div>
`,
};
let userQuery = {
template: `
<div>
<h1>我是用户2的信息</h1>
</div>
`,
};
let App = {
// 下面的router-link会渲染成a标签,to为a标签的href属性,to后面的name指定的是路由别名
// 下面的router-view是页面内容的渲染出口
// 通过v-bind绑定路由名称, v-bind:to="{ ... }", 可简写为:to="{ ... }"
// 下面的params与query参数分别对应上面所说的两种路径形式
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'userParams', params: {userId: 1 } }">登陆</router-link>
<router-link :to="{ name: 'userQuery', query: { userId: 2 } }">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 创建一个vue-router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// 1. xx.html/users/1
name: 'userParams',
path: '/users/:userId',
component: userParams,
},
{
// 2. xx.html/users?userId=1
name: 'userQuery',
path: '/users',
component: userQuery,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在跟实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>

测试效果如下图:




路由参数的实现原理

<body>
<div id="app"></div>
<script>
/*
在真实的场景中,有以下两种路径形式:
1. xx.html/user/1
2. xx.html/user/?userId=1
*/
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是主页面</h1>
</div>
`,
};
let userParams = {
template: `
<div>
<h1>我是用户1的信息</h1>
</div>
`,
created () {
console.log('this.$route:', this.$route);
console.log('userId:', this.$route.params.userId);
// 此时可以发送ajax请求到后端获取数据
},
};
let userQuery = {
template: `
<div>
<h1>我是用户2的信息</h1>
</div>
`,
created () {
console.log('this.$route:', this.$route);
console.log('userId:', this.$route.query.userId);
// 此时可以发送ajax请求到后端获取数据
}
};
let App = {
// 下面的router-link会渲染成a标签,to为a标签的href属性,to后面的name指定的是路由别名
// 下面的router-view是页面内容的渲染出口
// 通过v-bind绑定路由名称, v-bind:to="{ ... }", 可简写为:to="{ ... }"
// 下面params与query参数分别对应上面所说的两种路径形式
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'userParams', params: {userId: 1 } }">登陆</router-link>
<router-link :to="{ name: 'userQuery', query: { userId: 2 } }">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 创建一个vue-router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// 1. xx.html/user/1
name: 'userParams',
path: '/user/:userId',
component: userParams,
},
{
// 2. xx.html/user/?userId=1
name: 'userQuery',
path: '/user',
component: userQuery,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在跟实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>

测试效果如下图:





子路由

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
template: `
<div>
<h1>我是测试页面</h1>
<router-link to="childpages01">子页面01</router-link>
<router-link to="childpages02">子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/courses',
component: Test,
// children实现子路由(子页面)
children: [
{
path: 'childpages01',
component: ChildPages01,
},
{
path: 'childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>

测试效果如下图:



可见,使用此方法,子页面不能正常显示.


子路由之append

append参数会在路径后面追加子路由的路径,注意:会在后面一直追加.

append参数只适用于只需一层子路由的情况.

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
// 添加append参数
template: `
<div>
<h1>我是测试页面</h1>
<router-link to="childpages01" append>子页面01</router-link>
<router-link to="childpages02" append>子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/test',
component: Test,
// children实现子路由(子页面)
children: [
{
path: 'childpages01',
component: ChildPages01,
},
{
path: 'childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>

测试效果如下图:



这里只点击了一次 子页面01,显示的内容是正常的,后面的路径也是正常的.

下面的是点击了两次:



可见,内容显示不正常了,后面的路径也不正常了——append参数会在后面一直添加子路由中的路径.

使用以上方式,路径是写死在属性中的,所以子路径会不断的append到最后面,导致后续访问不到响应的页面,可以采用另一种方式——动态绑定属性.

动态绑定属性

动态绑定属性即给子路由命名,使用子路由命的名称来实现子路径的正常切换.

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
// 使用子路由命的名称来实现子路径的正常切换
template: `
<div>
<h1>我是测试页面</h1>
<router-link :to="{ name: 'childpages01' }">子页面01</router-link>
<router-link :to="{ name: 'childpages02' }">子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/test',
component: Test,
// children实现子路由(子页面)
children: [
{
// 给子路径命名
name: 'childpages01',
path: 'childpages01',
component: ChildPages01,
},
{
// 给子路径命名
name: 'childpages02',
path: 'childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>

注意:此方法必须使用name查找组件和路径的对应关系,而不能使用path.


子路由之append升级版

所谓的append升级版其实就是同时使用动态绑定属性和append.

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
// append升级版:<router-link :to="{ name: 'childpages01' }" append>...</router-link>
template: `
<div>
<h1>我是测试页面</h1>
<router-link :to="{ name: 'childpages01' }" append>子页面01</router-link>
<router-link :to="{ name: 'childpages02' }" append>子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/test',
component: Test,
// children实现子路由(子页面)
children: [
{
// 给子路径命名
name: 'childpages01',
path: 'childpages01',
component: ChildPages01,
},
{
// 给子路径命名
name: 'childpages02',
path: 'childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>

子路由之非append

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
template: `
<div>
<h1>我是测试页面</h1>
<router-link to="/test/childpages01">子页面01</router-link>
<router-link to="/test/childpages02">子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/test',
component: Test,
// children实现子路由(子页面)
children: [
{
// 子路由之非append(写全路径)
path: '/test/childpages01',
component: ChildPages01,
},
{
// 子路由之非append(写全路径)
path: '/test/childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>


路由重定向

<body>
<div id="app"></div>
<script>
// // 在Vue根实例中使用VueRouter
Vue.use(VueRouter); let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Pay = {
template: `
<div>
<h1>我是支付页面</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登陆</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'pay',
path: '/pay',
// 使用redirect实现路由重定向
// 把a标签的锚点值和页面内容绑定了对应关系
redirect: '/login',
component: Pay,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>

如上代码,我们点击支付链接时,将会跳转至登陆页面.



手动路由

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter); let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
template: `
<div>
<h1>我是测试页面</h1>
</div>
`,
};
let App = {
// 使用v-on(简写为@)给按钮绑定一个事件
template: `
<div>
<router-link to="/">首页</router-link>
<button @click="myClick">点击跳转至测试页面</button>
<router-view></router-view>
</div>
`,
// 定义一个用于跳转至测试页面的的事件
methods: {
myClick: function () {
this.$router.push('/test');
}
},
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
path: '/',
component: Home,
},
{
path: '/test',
component: Test,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>

如上代码,点击按钮即可跳转至测试页面.



路由钩子

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Pay = {
template: `
<div>
<h1>我是支付页面</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登陆</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link>
<router-view></router-view>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'pay',
path: '/pay',
// 这一步骤将调用路由钩子函数(通过布尔值来判断是否调用该钩子函数)
meta: {required_login: true},
component: Pay,
},
],
});
// 定义一个路由钩子函数
// 通过router对象的beforeEach(function (to, form, next) {})
router.beforeEach(function (to, from, next) {
// to:从哪来
// from:到哪去
// next:下一步做什么
console.log('to:', to);
console.log('from:', from);
console.log('next:', next);
if (to.meta.required_login) {
next('/login');
} else {
next(); // 正常跳转
}
// router.afterEach(function (to, from) { ··· });
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>

如上代码,通过路由钩子函数实现了点击支付链接时跳转至登陆页面的功能.



在路径中去掉"#"号

在实例化的router对象中增加一个属性:mode: 'history',该属性可将路径中显示的"#"号去掉.

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Pay = {
template: `
<div>
<h1>我是支付页面</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登陆</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link>
<router-view></router-view>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
// 使用mode: 'history'实现取去掉路径中显示的"#"号
mode: 'history',
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'pay',
path: '/pay',
component: Pay,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>


"

【Vue路由系统详述】的更多相关文章

  1. 10.3 Vue 路由系统

     Vue 路由系统  简单示例 main.js  import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...

  2. Vue路由系统

    Vue路由系统 一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如何实现路由控制,即Vue路由系统. 一.VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改 ...

  3. Vue专题-路由系统

    一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如果实现路由控制,即Vue路由系统. Vue路由系统 VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改变, ...

  4. Vue.js之路由系统

    Vue.js生态之vue-router vue-router是什么? vue-router是Vue的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容. vue-router的安装与基本配置 ...

  5. vue学习之六路由系统

    一.vueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改变,从而不断修改组件内容来实现的,我们来试试不使用VueRouter,自己实现路由控制,如下代码: <!DOCTY ...

  6. 简简单单的Vue3(插件开发,路由系统,状态管理)

    既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 插件 路由(vue-router) 状态管理模式(Vuex) 那在上篇文章,我们讲了, ...

  7. 04Vue.js路由系统

    Vue.js路由系统: https://pizzali.github.io/2018/10/28/Vue.js%E8%B7%AF%E7%94%B1%E7%B3%BB%E7%BB%9F/

  8. Vue.js—组件快速入门及Vue路由实例应用

    上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...

  9. vue 路由里面的 hash 和 history

    对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...

随机推荐

  1. hive创建表时报错

    这是因为mysql字符集的原因.修改mysql的字符集. mysql> alter database hive character set latin1; 参考博客:https://blog.c ...

  2. Oracle 中的 Incarnation 到底是个什么?概念理解篇

    高中时候,我深深“爱”上了一位女孩子.那个年纪确实不懂什么是真正的“爱”,反正每天满脑子都是她,只要见到她就会紧张和激动,确切的说是深深的喜欢.你告诉我这叫初恋?不,我的初恋应该是小学3年级,三六班. ...

  3. python3练习100题——036

    原题链接:http://www.runoob.com/python/python-exercise-example36.html 题目:求100之内的素数. 之前有类似的题,所以这次遇到觉得很容易了, ...

  4. 10个Python 初学者必知编码小技巧

          技巧 #1   字符串翻转 >>> a = "codementor" >>> print "Reverse is" ...

  5. DE1_MSEL

    基础的一般实验:01001(现在用的)或10010 马上换linux,做个记录: sd卡启动linux系统时,启动开关0至4位拨至00000

  6. No module named ‘sklearn.model_selection解决办法

    在python中运行导入以下模块 from sklearn.model_selection import train_test_split 出现错误:  No module named ‘sklear ...

  7. SpringBoot中的bean加载顺序

    https://www.dazhuanlan.com/2019/10/22/5daebc5d16429/ 最近在做传统Spring项目到SpringBoot项目迁移过程中,遇到了一些bean加载顺序的 ...

  8. yii2 场景使用

    场景定义 //场景 const SCENARIO_USER_CREATE='0';//前台用户新增 const SCENARIO_USER_UPDATE='1';//前台用户更新 场景配置 publi ...

  9. 只要没有给String[]数组new 空间,那么他就只是一个引用

    public class Test1 { @Test public void test(){ String[] values = {"good", "morning&qu ...

  10. 2019牛客多校第四场K number dp or 思维

    number 题意 给一个数字串,问有几个子串是300的倍数 分析 dp写法:这题一看就很dp,直接一个状态dp[i][j]在第i位的时候膜300的余数是j左过去即可.这题比赛的时候样例老是少1,后面 ...