day06-webpack

古城微笑少年丶 2022-11-30 04:14 286阅读 0赞

0.学习目标

  • 了解vue-router使用
  • 了解webpack使用
  • 会使用vue-cli搭建项目
  • 独立搭建后台管理系统
  • 了解系统基本结构

1.路由vue-router

1.1.场景模拟

现在我们来实现这样一个功能：

一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换：

在这里插入图片描述

1.1.1.编写父组件

为了让接下来的功能比较清晰，我们先新建一个文件夹：src:

在这里插入图片描述

然后新建一个HTML文件，作为入口：index.html

在这里插入图片描述

然后编写页面的基本结构：

  1. <div id="app">
  2.     <span>登录</span>
  3.     <span>注册</span>
  4.     <hr/>
  5.     <div>
  6.         登录页/注册页
  7.     </div>
  8. </div>
  9. <script src="../node_modules/vue/dist/vue.js"></script>
  10. <script type="text/javascript">
  11.     var vm = new Vue({
  13.         el:"#app"
  14.     })
  15. </script>

样式：

在这里插入图片描述

1.1.2.编写登录组件

接下来我们来实现登录组件，以前我们都是写在一个文件中，但是为了复用性，开发中都会把组件放如独立的JS文件中，我们新建一个login.js

在这里插入图片描述

编写组件，这里我们只写模板，不写功能：

  1. const loginForm = {
  3.     template:'\
  4.     <div>\
  5.     <h2>登录页</h2> \
  6.     用户名：<input type="text"><br/>\
  7.     密码：<input type="password"><br/>\
  8.     </div>\
  9.     '
  10. }

1.1.3.编写注册组件

新建单文件组件：register.js

在这里插入图片描述

编写模板：

  1. const registerForm = {
  3.     template:'\
  4.     <div>\
  5.     <h2>注册页</h2> \
  6.     用户名：<input type="text"><br/>\
  7.     密码：<input type="password"><br/>\
  8.     确认密码：<input type="password"><br/>\
  9.     </div>\
  10.     '
  11. }

1.1.4.在父组件中引用

在index.html中使用刚刚编写的两个组件

  1. <div id="app">
  2.         <span>登录</span>
  3.         <span>注册</span>
  4.         <hr/>
  5.         <div>
  6.             <login-form></login-form>
  7.             <register-form></register-form>
  8.         </div>
  9.     </div>
  10.     <script src="../node_modules/vue/dist/vue.js"></script>
  11.     <script src="js/login.js"></script>
  12.     <script src="js/register.js"></script>
  13.     <script type="text/javascript">
  14.         var vm = new Vue({
  16.             el:"#app",
  17.             components:{
  18.      // 引用登录和注册组件
  19.                 loginForm,
  20.                 registerForm
  21.             }
  22.         })
  23.     </script>

效果：

在这里插入图片描述

1.1.5.问题

我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。

但是，如何才能动态加载组件，实现组件切换呢？

虽然使用原生的Html5和JS也能实现，但是官方推荐我们使用vue-router模块。

1.2.vue-router简介和安装

使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。

官网：https://router.vuejs.org/zh-cn/

使用npm安装：npm install vue-router --save

在这里插入图片描述

在index.html中引入依赖：

  1. <script src="../node_modules/vue-router/dist/vue-router.js"></script>

1.3.快速入门

新建vue-router对象，并且指定路由规则：

  1. // 创建VueRouter对象
  2. const router = new VueRouter({
  4.     routes:[ // 编写多个路由规则
  5.         {
  7.             path:"/login", // 请求路径
  8.             component:loginForm // 组件名称
  9.         },
  10.         {
  11.     path:"/register",component:registerForm},
  12.     ]
  13. })
  • 创建VueRouter对象，并指定路由参数

  • routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：

    • path：路由的路径
    • component：组件名称

在父组件中引入router对象：

  1. var vm = new Vue({
  3.     el:"#app",
  4.     components:{
  5.     // 引用登录和注册组件
  6.         loginForm,
  7.         registerForm
  8.     },
  9.     router // 引用上面定义的router对象
  10. })

页面跳转控制：

  1. <div id="app">
  2.     <!--router-link来指定跳转的路径-->
  3.     <span><router-link to="/login">登录</router-link></span>
  4.     <span><router-link to="/register">注册</router-link></span>
  5.     <hr/>
  6.     <div>
  7.         <!--vue-router的锚点-->
  8.         <router-view></router-view>
  9.     </div>
  10. </div>
  • 通过<router-view>来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
  • 通过<router-link>指定一个跳转链接，当点击时，会触发vue-router的路由功能，路径中的hash值会随之改变

效果：

在这里插入图片描述

注意：单页应用中，页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。

事实上，我们总共就一个HTML：index.html

1.4.父子组件

2.webpack

2.1.认识webpack

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

中文官方网站：https://www.webpackjs.com/

在这里插入图片描述

官网给出的解释：

在这里插入图片描述

为什么需要打包？

  • 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
  • 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
  • 将代码打包的同时进行混淆，提高代码的安全性。

2.2.四个核心概念

学习Webpack，你需要先理解四个核心概念：

  • 入口(entry)

    webpack打包的启点，可以有一个或多个，一般是js文件。webpack会从启点文件开始，寻找启点直接或间接依赖的其它所有的依赖，包括JS、CSS、图片资源等，作为将来打包的原始数据

  • 输出(output)

    出口一般包含两个属性：path和filename。用来告诉webpack打包的目标文件夹，以及文件的名称。目的地也可以有多个。

  • 加载器（loader）

    webpack本身只识别Js文件，如果要加载非JS文件，必须指定一些额外的加载器（loader），例如css-loader。然后将这些文件转为webpack能处理的有效模块，最后利用webpack的打包能力去处理。

  • 插件(plugins)

    插件可以扩展webpack的功能，让webpack不仅仅是完成打包，甚至各种更复杂的功能，或者是对打包功能进行优化、压缩，提高效率。

2.3.安装

webpack支持全局安装和本地安装，官方推荐是本地安装，我们按照官方的来。

输入命令：npm install webpack webpack-cli --save-dev

在这里插入图片描述

此时，我们注意下项目中文件夹下，会有一个package.json文件。（其实早就有了）

在这里插入图片描述

打开文件，可以看到我们之前用npm安装过的文件都会出现在这里：

在这里插入图片描述

2.4.编写webpack配置

接下来，我们编写一个webpack的配置，来指定一些打包的配置项。配置文件的名称，默认就是webpack.config.js，我们放到hello-vue的根目录：

在这里插入图片描述

配置文件中就是要指定上面说的四个核心概念，入口、出口、加载器、插件。

不过，加载器和插件是可选的。我们先编写入口和出口

2.4.1.入口entry

webpack打包的启点，可以有一个或多个，一般是js文件。现在思考一下我们有没有一个入口？貌似没有，我们所有的东西都集中在index.html，不是一个js，那怎么办？

我们新建一个js，把index.html中的部分内容进行集中，然后在index.html中引用这个js不就OK了！

在这里插入图片描述

然后把原来index.html中的js代码全部移动到main.js中

  1. // 使用es6的语法导入js模块
  2. import Vue from '../node_modules/vue/dist/vue';
  3. import VueRouter from '../node_modules/vue-router/dist/vue-router'
  4. import loginForm from './js/login'
  5. import registerForm from './js/register'
  7. Vue.use(VueRouter)
  9. // 创建VueRouter对象
  10. const router = new VueRouter({
  12.     routes:[ // 编写多个路由规则
  13.         {
  15.             path:"/login", // 请求路径
  16.             component:loginForm // 组件名称
  17.         },
  18.         {
  19.     path:"/register",component:registerForm},
  20.     ]
  21. })
  22. var vm = new Vue({
  24.     el:"#app",
  25.     components:{
  26.     // 引用登录和注册组件
  27.         loginForm,
  28.         registerForm
  29.     },
  30.     router
  31. })

  • 原来的index.html中引入了很多其它js，在这里我们使用es6的import语法进行导入。

    注意，要使用import，就需要在login.js和register.js中添加export导出语句：

    1. const loginForm = {
    3.     template:`
    4.     <div> 
    5.     <h2>登录页</h2> 
    6.     用户名：<input type="text"><br/>
    7.     密码：<input type="password"><br/>
    8.     </div>
    9.     `
    10. }
    11. export default loginForm;

    register.js:

    1. const registerForm = {
    3.     template:`
    4.     <div>
    5.     <h2>注册页</h2> 
    6.     用户名：<input type="text"><br/>
    7.     密码：<input type="password"><br/>
    8.     确认密码：<input type="password"><br/>
    9.     </div>
    10.     `
    11. }
    12. export default registerForm;
  • vue-router使用模块话加载后，必须增加一句：Vue.use(VueRouter)

这样，main.js就成了我们整个配置的入口了。

我们在webpack.config.js中添加以下内容：

  1. module.exports={
  3.     entry:'./src/main.js',  //指定打包的入口文件
  4. }

2.4.2.出口output

出口，就是输出的目的地。一般我们会用一个dist目录，作为打包输出的文件夹：

在这里插入图片描述

然后，编写webpack.config.js，添加出口配置：

  1. module.exports={
  3.     entry:'./src/main.js',  //指定打包的入口文件
  4.     output:{
  6.         // path: 输出的目录，__dirname是相对于webpack.config.js配置文件的绝对路径
  7.         path : __dirname+'/dist',  
  8.         filename:'build.js'     //输出的js文件名
  9.     }
  10. }

2.5.执行打包

在控制台输入以下命令：

  1. npx webpack --config webpack.config.js

在这里插入图片描述

随后，查看dist目录：

在这里插入图片描述

尝试打开build.js，你根本看不懂：

在这里插入图片描述

所有的js合并为1个，并且对变量名进行了随机打乱，这样就起到了 压缩、混淆的作用。

2.6.测试运行

在index.html中引入刚刚生成的build.js文件，

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <!--router-link来指定跳转的路径-->
  10.         <span><router-link to="/login">登录</router-link></span>
  11.         <span><router-link to="/register">注册</router-link></span>
  12.         <hr/>
  13.         <div>
  14.             <!--vue-router的锚点-->
  15.             <router-view></router-view>
  16.         </div>
  17.     </div>
  18.     <script src="../dist/build.js"></script>
  19. </body>
  20. </html>

然后运行：

在这里插入图片描述

2.7.打包CSS

2.7.1.编写css文件

我们来编写一段CSS代码，对index的样式做一些美化：

在这里插入图片描述

内容：

  1. #app a{
  3.     display: inline-block;
  4.     width: 150px;
  5.     line-height: 30px;
  6.     background-color: dodgerblue;
  7.     color: white;
  8.     font-size: 16px;
  9.     text-decoration: none;
  10. }
  11. #app a:hover{
  13.     background-color: whitesmoke;
  14.     color: dodgerblue;
  15. }
  16. #app div{
  18.     width: 300px;
  19.     height: 150px;
  20. }
  21. #app{
  23.     width: 305px;
  24.     border: 1px solid dodgerblue;
  25. }

2.7.2.安装加载器

前面说过，webpack默认只支持js加载。要加载CSS文件，必须安装加载器：

命令：

  1. npm install style-loader css-loader --save-dev

在这里插入图片描述

此时，在package.json中能看到新安装的：

在这里插入图片描述

2.7.3.在main.js引入css文件

因为入口在main.js，因此css文件也要在这里引入。依然使用ES6 的模块语法：

  1. import './css/main.css'

2.7.4.在webpack.config.js添加加载器

  1. module.exports = {
  3.     entry: './src/main.js',  //指定打包的入口文件
  4.     output: {
  6.         path: __dirname + '/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径
  7.         filename: 'build.js'  //输出文件
  8.     },
  9.     module: {
  11.         rules: [
  12.             {
  14.                 test: /\.css$/, // 通过正则表达式匹配所有以.css后缀的文件
  15.                 use: [ // 要使用的加载器，这两个顺序一定不要乱
  16.                     'style-loader',
  17.                     'css-loader'
  18.                 ]
  19.             }
  20.         ]
  21.     }
  22. }

2.7.5.重新打包

再次输入打包指令：npx webpack --config webpack.config.js

在这里插入图片描述

效果：

在这里插入图片描述

2.8.script脚本

我们每次使用npm安装，都会在package.json中留下痕迹，事实上，package.json中不仅可以记录安装的内容，还可编写脚本，让我们运行命令更加快捷。

我们可以把webpack的命令编入其中：

在这里插入图片描述

以后，如果要打包，就可以直接输入：npm run build即可。

  • npm run ：执行npm脚本，后面跟的是脚本的名称build

在这里插入图片描述

2.9.打包HTML

之前的打包过程中，除了HTML文件外的其它文件都被打包了，当在线上部署时，我们还得自己复制HTML到dist，然后手动添加生成的js到HTML中，这非常不友好。

webpack中的一个插件：html-webpack-plugin，可以解决这个问题。

1）安装插件：npm install --save-dev html-webpack-plugin

需要在webpack.config.js中添加插件：

  1. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. module.exports = {
  5.     entry: './src/main.js',  //指定打包的入口文件
  6.     output: {
  8.         path: __dirname + '/dist',  // 注意：__dirname表示webpack.config.js所在目录的绝对路径
  9.         filename: 'build.js'           //输出文件
  10.     },
  11.     module: {
  13.         rules: [
  14.             {
  16.                 test: /\.css$/, // 通过正则表达式匹配所有以.css后缀的文件
  17.                 use: [ // 要使用的加载器，这两个顺序一定不要乱
  18.                     'style-loader',
  19.                     'css-loader'
  20.                 ]
  21.             }
  22.         ]
  23.     },
  24.     plugins:[
  25.         new HtmlWebpackPlugin({
  27.             title: '首页',  //生成的页面标题<head><title>首页</title></head>
  28.             filename: 'index.html', // dist目录下生成的文件名
  29.             template: './src/index.html' // 我们原来的index.html，作为模板
  30.         })
  31.     ]
  32. }

2）将原来HTML中的引入js代码删除：

在这里插入图片描述

3）再次打包：npm run build

在这里插入图片描述

4）查看dist目录：

在这里插入图片描述

打开index.html，发现已经自动添加了当前目录下的build.js

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <!--router-link来指定跳转的路径-->
  10.         <span><router-link to="/login">登录</router-link></span>
  11.         <span><router-link to="/register">注册</router-link></span>
  12.         <div>
  13.             <!--vue-router的锚点-->
  14.             <router-view></router-view>
  15.         </div>
  16.     </div>
  17. <script type="text/javascript" src="build.js"></script></body>
  18. </html>

2.10.热更新的web服务

刚才的案例中，每次修改任何js或css内容，都必须重新打包，非常麻烦。

webpack给我们提供了一个插件，可以帮我们运行一个web服务，加载页面内容，并且修改js后不需要重新加载就能看到最新结果：

1）安装插件：

  1. npm install webpack-dev-server --save-dev

2）添加启动脚本

在package.json中配置script

  1. "scripts": {
  3.     "dev": "webpack-dev-server --inline --hot --open --port 8080 --host 127.0.0.1"
  4.   },

–inline：自动刷新

–hot：热加载

–port：指定端口

–open：自动在默认浏览器打开

–host：可以指定服务器的 ip，不指定则为127.0.0.1

3）运行脚本：

  1. npm run dev

在这里插入图片描述

4）效果：

在这里插入图片描述

3.vue-cli

3.1.介绍和安装

在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。

幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli

使用它能快速的构建一个web工程模板。

官网：https://github.com/vuejs/vue-cli

安装命令：

  1. npm install -g vue-cli

3.2.快速上手

我们新建一个module：

在这里插入图片描述

打开终端并进入目录：

在这里插入图片描述

用vue-cli命令，快速搭建一个webpack的项目：vue init webpack

在这里插入图片描述

在这里插入图片描述

前面几项都走默认或yes

下面这些我们选no

在这里插入图片描述

最后，再选yes，使用 npm安装

在这里插入图片描述

在这里插入图片描述

3.3.项目结构

安装好的项目结构：

在这里插入图片描述

入口文件：

在这里插入图片描述

3.4.单文件组件

需要注意的是，我们看到有一类后缀名为.vue的文件，我们称为单文件组件

在这里插入图片描述

每一个.vue文件，就是一个独立的vue组件。类似于我们刚才写的loginForm.js和registerForm.js

只不过，我们在js中编写 html模板和样式非常的不友好，而且没有语法提示和高亮。

而单文件组件中包含三部分内容：

  • template：模板，支持html语法高亮和提示
  • script：js脚本，这里编写的就是vue的组件对象，看到上面的data(){}了吧
  • style：样式，支持CSS语法高亮和提示

每个组件都有自己独立的html、JS、CSS，互不干扰，真正做到可独立复用。

3.5.运行

看看生成的package.json：

在这里插入图片描述

  • 可以看到这引入了非常多的依赖，绝大多数都是开发期依赖，比如大量的加载器。
  • 运行时依赖只有vue和vue-router

  • 脚本有三个：

    • dev：使用了webpack-dev-server命令，开发时热部署使用
    • start：使用了npm run dev命令，与上面的dev效果完全一样
    • build：等同于webpack的打包功能，会打包到dist目录下。

我们执行npm run dev 或者 npm start 都可以启动项目：

在这里插入图片描述

页面：

在这里插入图片描述

4.搭建后台管理前端

4.1.导入已有资源

后台项目相对复杂，为了有利于教学，我们不再从0搭建项目，而是直接使用课前资料中给大家准备好的源码：

在这里插入图片描述

我们解压缩，放到工作目录中：

在这里插入图片描述

然后在eclipse中导入新的工程：

在这里插入图片描述

选中我们的工程：

在这里插入图片描述

这正是一个用vue-cli构建的webpack工程，是不是与昨天的一样：

在这里插入图片描述

4.2.安装依赖

你应该注意到，这里并没有node_modules文件夹，方便给大家下发，已经把依赖都删除了。不过package.json中依然定义了我们所需的一切依赖：

在这里插入图片描述

我们只需要通过命令来安装所需依赖即可。打开终端，进入项目目录，输入：npm install

在这里插入图片描述

大概需要1分钟。

4.3.运行一下看看

输入命令：

  1. npm run dev

在这里插入图片描述

发现默认的端口是9001。访问：http://localhost:9001

会自动进行跳转：

在这里插入图片描述

5.Vuetify框架

5.1.为什么要学习UI框架

Vue负责的是虽然会帮我们进行视图的渲染，但是样式是有我们自己来完成。这显然不是我们的强项，因此后端开发人员一般都喜欢使用一些现成的UI组件，拿来即用，常见的例如：

  • BootStrap
  • LayUI
  • EasyUI
  • ZUI

然而这些UI组件的基因天生与Vue不合，因为他们更多的是利用DOM操作，借助于jQuery实现，而不是MVVM的思想。

而目前与Vue吻合的UI框架也非常的多，国内比较知名的如：

  • element-ui：饿了么出品
  • i-view：某公司出品

然而我们都不用，我们今天推荐的是一款国外的框架：Vuetify

官方网站：https://vuetifyjs.com/zh-Hans/

在这里插入图片描述

5.2.为什么是Vuetify

有中国的为什么还要用外国的？原因如下：

  • Vuetify几乎不需要任何CSS代码，而element-ui许多布局样式需要我们来编写
  • Vuetify从底层构建起来的语义化组件。简单易学，容易记住。
  • Vuetify基于Material Design（谷歌推出的多平台设计规范），更加美观，动画效果酷炫，且风格统一

这是官网的说明：

在这里插入图片描述

缺陷：

  • 目前官网虽然有中文文档，但因为翻译问题，几乎不太能看。

5.3.怎么用？

基于官方网站的文档进行学习：

在这里插入图片描述

我们重点关注UI components即可，里面有大量的UI组件，我们要用的时候再查看，不用现在学习，先看下有什么：

在这里插入图片描述

在这里插入图片描述

以后用到什么组件，就来查询即可。

6.项目结构

开始编码前，我们先了解下项目的结构：

6.1.目录结构

首先是目录结构图：

在这里插入图片描述

6.2.调用关系

我们最主要理清index.html、main.js、App.vue之间的关系：

在这里插入图片描述

理一下：

  • index.html中定义了空的div，其id为app。
  • main.js中定义了Vue对象，并且绑定通过id选择器，绑定到index.html的div中，因此main.js的内容都将在index.html的div中显示。
  • 而main.js中只有一行内容：<App/>,这是使用了App组件，即App.vue，也就是说index.html中最终展现的是App.vue中的内容。
  • App.vue中也没有内容，而是定义了vue-router的锚点：<router-view>,我们之前讲过，vue-router路由后的组件将会在锚点展示。
  • 最终的结论是：一切路由后的内容都将通过App.vue在index.html中显示。

6.3.页面布局

接下来我们一起看下页面布局：

Layout组件是我们的整个页面的布局组件：

在这里插入图片描述

一个典型的三块布局。包含左，上，中三部分：

在这里插入图片描述

里面使用了Vuetify中的2个组件和一个布局元素：

  • v-navigation-drawer ：导航抽屉，主要用于容纳应用程序中的页面的导航链接。

在这里插入图片描述

  • v-toolbar：工具栏通常是网站导航的主要途径。可以与导航抽屉一起很好地工作，动态选择是否打开导航抽屉，实现可伸缩的侧边栏。

在这里插入图片描述

  • v-content：并不是一个组件，而是标记页面布局的元素。可以根据您指定的app组件的结构动态调整大小，使得您可以创建高度可定制的组件。

那么问题来了：v-content中的内容来自哪里？

在这里插入图片描述

  • Layout映射的路径是/
  • 除了Login以为的所有组件，都是定义在Layout的children属性，并且路径都是/的下面
  • 因此当路由到子组件时，会在Layout中定义的锚点中显示。
    div，其id为app`。
  • main.js中定义了Vue对象，并且绑定通过id选择器，绑定到index.html的div中，因此main.js的内容都将在index.html的div中显示。
  • 而main.js中只有一行内容：<App/>,这是使用了App组件，即App.vue，也就是说index.html中最终展现的是App.vue中的内容。
  • App.vue中也没有内容，而是定义了vue-router的锚点：<router-view>,我们之前讲过，vue-router路由后的组件将会在锚点展示。
  • 最终的结论是：一切路由后的内容都将通过App.vue在index.html中显示。

6.3.页面布局

接下来我们一起看下页面布局：

Layout组件是我们的整个页面的布局组件：

在这里插入图片描述

一个典型的三块布局。包含左，上，中三部分：

在这里插入图片描述

里面使用了Vuetify中的2个组件和一个布局元素：

  • v-navigation-drawer ：导航抽屉，主要用于容纳应用程序中的页面的导航链接。

在这里插入图片描述

  • v-toolbar：工具栏通常是网站导航的主要途径。可以与导航抽屉一起很好地工作，动态选择是否打开导航抽屉，实现可伸缩的侧边栏。

在这里插入图片描述

  • v-content：并不是一个组件，而是标记页面布局的元素。可以根据您指定的app组件的结构动态调整大小，使得您可以创建高度可定制的组件。

那么问题来了：v-content中的内容来自哪里？

在这里插入图片描述

  • Layout映射的路径是/
  • 除了Login以为的所有组件，都是定义在Layout的children属性，并且路径都是/的下面
  • 因此当路由到子组件时，会在Layout中定义的锚点中显示。
  • 并且Layout中的其它部分不会变化，这就实现了布局的共享。

发表评论

表情：
评论列表 （有 0 条评论，286人围观）

还没有评论，来说两句吧...

相关阅读

    相关 day06-数组

    1.数组 概念： 指的是一种容器，可以同来存储同种数据类型的多个值。 但是数组容器在存储数据的时候，需要结合隐式转换考虑。 比如： 定义了一个int类型的数组

    约定不等于承诺〃约定不等于承诺〃/ 0 赞/ 109 阅读

    相关 day06_02

     定义类： 　　定义格式 　　　　创建java文件，与类名相同 　　　　public class 类名\{     　　　　数据类型  属性名称1；     　　　　

    你的名字你的名字/ 0 赞/ 290 阅读

    相关 day06_01

    ArrayList集合的使用 \ 　　也是引用数据类型 \ 步骤： \ 　　 1，导入包java.util包中 \ 　　 2.创建引用类型的变量 \ 　　　

    港控/mmm°港控/mmm°/ 0 赞/ 284 阅读