首页 技术 正文

Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】

技术 2022年11月14日
0 收藏 932 点赞 2,662 浏览 13816 个字

全部章节 >>>>

文章目录

一、栅格组件

1、栅格组件介绍

在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在12栅格系统的基础上，Ant Design of Vue将整个设计建议区域按照24等分的原则进行划分。

划分之后的信息区块称之为“盒子”。建议横向排列的盒子数量最多四个，最少一个。“盒子”在整个屏幕上占比见下图6.1所示。设计部分基于盒子的单位来定制盒子内部的排版规则，以保证视觉层面的舒适感。

Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】
栅格组件是布局的栅格化系统，Ant Design of Vue是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。栅格化系统特点：

  • 通过row在水平方向建立一组column（简写col）。
  • 内容应当放置于col内，并且，只有col可以作为row的直接元素。
  • 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用.col-8来创建。
  • 如果一个row中的col总和超过24，那么多余的col会作为一个整体另起一行排列。

栅格组件的列属性

属性 说明
offset 栅格左侧的间隔格数，间隔内不可以有栅格
order 栅格顺序，flex布局模式下有效
pull 栅格向左移动格数
push 栅格向右移动格数
span 栅格占位格数，为0时相当于display: none
xs 可视区宽度<576px 响应式栅格，可为栅格数或一个包含其他属性的对象
sm 可视区宽度≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象
md 可视区宽度≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象
lg 可视区宽度≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象
xl 可视区宽度≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象
xxl 可视区宽度≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象

栅格组件的行属性

属性 说明
align flex布局下的垂直对齐方式：top、middle和bottom
gutter 栅格间隔，可以写成像素值或支持响应式的对象写法{ xs: 8, sm: 16, md: 24}
justify flex布局下的水平排列方式：start、end、center、space-around和space-between
type 布局模式，可选flex，在现代浏览器下有效

2、栅格组件使用

示例：基本栅格布局效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/antd.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
<style type="text/css">
#app{
text-align: center;
line-height: 50px;
color: white;
}
.acol1{
background-color: #7dbcea;
}
.acol2{
background-color: #108ee9;
}
.arow{
margin-bottom: 30px;
}
</style>
</head>
<body>
<div id="app">
<a-row class="arow">
<a-col class="acol1" :span="12">col-12</a-col>
<a-col class="acol2" :span="12">col-12</a-col>
</a-row>
<a-row class="arow">
<a-col class="acol1" :span="8">col-8</a-col>
<a-col class="acol2" :span="8">col-8</a-col>
<a-col class="acol1" :span="8">col-8</a-col>
</a-row>
<a-row class="arow">
<a-col class="acol1" :span="6">col-6</a-col>
<a-col class="acol2" :span="6">col-6</a-col>
<a-col class="acol1" :span="6">col-6</a-col>
<a-col class="acol2" :span="6">col-6</a-col>
</a-row>
</div><script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app"
})
</script>
</body>
</html>

Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】
示例：实现在栅格中的间隔和列偏移效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/antd.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
<style type="text/css">
#app {
text-align: center;
line-height: 50px;
color: black;
}.acol1 {
background-color: #7dbcea;
}.gutter-box,.acol2{
background-color: #108ee9;
}.arow {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div id="app">
<p>列间隔</p>
<div>
<a-row :gutter="16">
<a-col class="gutter-row" :span="6">
<div class="gutter-box">col-6</div>
</a-col>
<a-col class="gutter-row" :span="6">
<div class="gutter-box">col-6</div>
</a-col>
<a-col class="gutter-row" :span="6">
<div class="gutter-box">col-6</div>
</a-col>
<a-col class="gutter-row" :span="6">
<div class="gutter-box">col-6</div>
</a-col>
</a-row>
</div>
<p>列偏移</p>
<div>
<a-row class="arow">
<a-col class="acol1"  :span="8">col-8</a-col>
<a-col class="acol2" :span="8" :offset="8">col-8</a-col>
</a-row>
<a-row class="arow">
<a-col class="acol1" :span="6" :offset="6">col-6 col-offset-6</a-col>
<a-col class="acol2" :span="6" :offset="6">col-6 col-offset-6</a-col>
</a-row>
<a-row class="arow">
<a-col class="acol1" :span="12" :offset="6">col-12 col-offset-6</a-col>
</a-row>
</div>
</div><script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app"
})
</script>
</body>
</html>

3、实践练习

二、输入组件

1、输入框组件使用

输入框组件是通过鼠标或键盘输入内容，是最基础的表单域的包装。一般在以下情况使用：

  • 需要用户输入表单域内容时。
  • 提供组合型输入框，带搜索的输入框，还可以进行大小选择。
属性 说明
addonAfter 设置带后置标签的输入框
addonBefore 设置带前置标签的输入框
defaultValue 输入框默认内容
disabled 是否禁用状态，默认为false
id 输入框的唯一标示
prefix 设置带有前缀图标的输入框
size 输入框大小，标准表单内的输入框大小限制为large。可选值为large、default、small、string和default
suffix 设置带有后缀图标的输入框
type 声明输入框类型，同原生input标签的type属性一致
value 输入框内容

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/antd.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
<style type="text/css">
#app{
width: 300px;
margin: 0 auto;
padding: 15px;
border: 1px solid #888;
}
</style>
</head>
<body>
<div id="app">
<fieldset>
<legend>订单录入</legend>
<p>
<a-input placeholder="请输入收货人姓名..." v-model="order.name">
<a-icon slot="prefix" type="user" />
</a-input>
</p>
<p>
<a-input placeholder="请输入支付密码..." type="password" v-model="order.password">
<a-icon slot="prefix" type="unlock" />
</a-input>
</p>
<p>
<a-input placeholder="请输入订单总金额..." defaultValue="0.00" v-model="order.price"><span
slot="addonBefore">￥</span><span slot="addonAfter">元</span></a-input>
</p>
<p>
<a-input placeholder="请输入收货地址..." type="textarea" v-model="order.address"></a-input>
</p>
<p>
<a-button type="primary" @click="doSave">保存</a-button>
</p>
</fieldset>
</div><script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
order: {
name: "",
password: "",
price: "0.00",
adress: ""
}
},
methods: {
doSave: function() {
this.$message.info("订单保存成功！");
}
}
});
</script>
</body>
</html>

2、选择器组件使用

选择器组件实现下拉选择功能。一般应用的情况是：

  • 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
  • 当选项少时（少于5项），建议直接将选项平铺。

选择器组件的常用属性

属性 说明
allowClear 支持清除
autoClearSearchValue 是否在选中项后清空搜索框，只在mode为multiple或tags时有效
autoFocus 默认获取焦点
defaultValue 指定默认选中的条目
dropdownClassName 下拉菜单的className属性
allowClear 支持清除
autoClearSearchValue 是否在选中项后清空搜索框，只在mode为multiple或tags时有效
autoFocus 默认获取焦点
defaultValue 指定默认选中的条目
dropdownClassName 下拉菜单的className属性

选择器组件的常用事件

事件 说明
blur 失去焦点的时触发事件
change 选中option或input的value变化（combobox模式下）时，触发事件
deselect 取消选中时触发事件，参数为选中项的value（或key）值，仅在multiple或tags模式下生效
focus 获得焦点时触发事件
search 文本框值变化时触发事件
select 被选中时触发事件，参数为选中项的value（或key）值

示例：使用选择器实现省市联动功能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/antd.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
<style type="text/css">
#app {
width: 300px;
margin: 0 auto;
padding: 15px;
border: 1px solid #888;
}
</style>
</head>
<body>
<div id="app">
<h3>省市联动</h3>
<a-select v-model="selectProvince" style="width: 120px" @change="doChange">
<a-select-option v-for="province in provinceData" :key="province">{{province}}
</a-select-option>
</a-select>
<a-select v-model="selectCity" style="width: 120px">
<a-select-option v-for="city in cities" :key="city">{{city}}</a-select-option>
</a-select></div><script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
provinceData: ["湖北", "湖南"],
cityData: {
"湖北": ["武汉", "襄阳", "宜昌"],
"湖南": ["长沙", "岳阳", "永州"],
},
cities: ["武汉", "襄阳", "宜昌"],
selectCity: "武汉",
selectProvince:"湖北"
},
methods: {
doChange: function(value) {
this.cities = this.cityData[value];
this.selectCity = this.cityData[value][0];
}
}
});
</script>
</body>
</html>

3、单选框组件使用

单选框组件用于在多个备选项中选中单个状态。

和选择器之间的区别是，单选框所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。

单选框组件包括两个部分Radio（或RadioButton）和RadioGroup，其中RadioGroup用于包裹一组Radio或RadioButton

Radio和RadioGroup包含的属性如下表所示。

Radio的主要属性

属性 说明
autofocus 自动获取焦点
checked 指定当前是否选中
defaultChecked 初始是否选中
value 根据value进行比较，判断是否选中

RadioGroup的主要属性

属性 说明
defaultValue 默认选中的值
disabled 禁选所有子单选器
name RadioGroup下所有input[type=“radio”]的name属性
options 以配置形式设置子元素
size 大小，只对按钮样式生效，可选值large、default和small
value 用于设置当前选中的值
buttonStyle RadioButton的风格样式，目前有描边和填色两种风格

示例：使用单选框组件实现行星知识测试题。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/antd.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
<style type="text/css">
#app {
width: 500px;
margin: 0 auto;
padding: 15px;
border: 1px solid #888;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<h2>行星知识测试</h2>
<h4>太阳系中最大的行星是？</h4>
<a-radio-group v-model="result1">
<a-radio-button value="a">金星</a-radio-button>
<a-radio-button value="b">木星</a-radio-button>
<a-radio-button value="c">水星</a-radio-button>
<a-radio-button value="d">火星</a-radio-button>
<a-radio-button value="e">土星</a-radio-button>
</a-radio-group>
<h4>太阳系中离太阳最近的行星是？</h4>
<a-radio-group v-model="result2">
<a-radio value="a">金星</a-radio>
<a-radio value="b">木星</a-radio>
<a-radio value="c">水星</a-radio>
<a-radio value="d">火星</a-radio>
<a-radio value="e">土星</a-radio>
</a-radio-group>
<h4>太阳系中离地球最近的行星是？</h4>
<a-radio-group v-model="result3" :options="items"> </a-radio-group>
<br />
<a-button type="primary" @click="doSubmit">提交</a-button>
</div><script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
items: [{
label: "金星",
value: "a"
}, {
label: "木星",
value: "b"
},{
label: "水星",
value: "c"
},{
label: "火星",
value: "d"
},{
label: "土星",
value: "e"
}],
result1: "",
result2: "",
result3: "",
},
methods: {
doSubmit: function() {
var score = 10;
if (this.result1 == "b") {
score += 30;
}
if (this.result2 == "c") {
score += 30;
}
if (this.result3 == "a") {
score += 30;
}
this.$message.info("您的得分：" + score);
}
}
});
</script>
</body>
</html>

4、实践练习

三、表单组件

1、表单组件使用

表单组件是具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框和下拉选择框等元素。表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。表单组件还提供了以下3种排列方式：

  • 水平排列：标签和表单控件水平排列（默认）。
  • 垂直排列：标签和表单控件上下垂直排列。
  • 行内排列：表单项水平行内排列。

使用Form.create处理表单使其具有自动收集数据并校验的功能。

表单组件基本结构如下所示：

<a-form>
  <a-form-item  label="输入提示文本">
    <a-input v-decorator="[
      “字段名”,      {        rules: [{验证规则,message: "出错提示"}]      }
    ]" />
  </a-form-item>
</a-form>

其中，< a-form-item/>表示表单域（Form.Item）。
一个表单域放一个被v-decorator属性装饰过的子元素，当有多个被装饰过的子元素时，help属性、required属性和validateStatus属性无法自动生成。

表单域的属性

属性 说明
colon 配合label属性使用，表示是否显示label后面的冒号
extra 额外的提示信息，和help类似，当需要错误信息和提示同时出现时，可以使用这个属性
hasFeedback 配合validateStatus属性使用，展示校验状态图标，建议只配合输入框组件使用
help 提示信息，如不设置，则会根据校验规则自动生成
label label标签的文本
labelCol label标签布局，同组件，设置span和offset值，如{span: 3, offset: 12}或sm:{span: 3, offset: 12}
required 是否必填，如不设置，则会根据校验规则自动生成
validateStatus 校验状态，如不设置，则会根据校验规则自动生成，可选：success、warning、error和validating

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/antd.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
<style type="text/css">
#app {
width: 300px;
margin: 0 auto;
padding: 15px;
border: 1px solid #888;
}
</style>
</head>
<body>
<div id="app">
<a-form :form="form" @submit="doSubmit">
<a-form-item label="邮件地址">
<a-input v-decorator="[
'email',{
rules:[{
type:'email',message:'邮件地址格式不正确！',
},{
required:true,message:'邮件地址不能为空！'
}]
}
]" /></a-form-item>
<a-form-item label="登录密码">
<a-input v-decorator="[
 'password',{
 rules:[{
 required:true,message:'登录密码不能为空！'
 }]
 }
 ]" type="password" />
</a-form-item><a-form-item label="确认密码">
<a-input v-decorator="[
 'confirm',{
 rules:[{
 required:true,message:'确认密码不能为空！'
 },{
validator:compareToFirstPassword,
}]
 }
 ]" type="password" />
</a-form-item><a-form-item label="昵称">
<a-input v-decorator="[
'nickname',{
rules:[{
required:true,message:'昵称不能为空！',whitespance:true
}]
}
]" />
</a-form-item><a-form-item>
<a-checkbox v-decorator="['agreement', {valuePropName: 'checked' }]">
我已同意 <a href="" rel="external nofollow" >《系统使用授权协议》</a>
</a-checkbox>
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit">注册</a-button>
</a-form-item>
</a-form>
</div><script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
beforeCreate() {
this.form = this.$form.createForm(this);
},
methods: {
doSubmit(e) {
var _this = this;
e.preventDefault(); //取消事假的默认动作
this.form.validateFieldsAndScroll(function(err, values) {
if (!err) {
_this.$message.info("用户注册成功")
console.log("表单中值", "values")
}
});
},
compareToFirstPassword(rule, value, callback) {
var form = this.form;
if (value && value !== form.getFieldValue("password")) {
callback("密码输入不一致！")
} else {
callback();
}
}
},
});
</script>
</body>
</html>

2、实践练习

四、树形组件

1、树形组件使用

树形组件是按树形呈现数据。

文件夹、组织架构、生物分类以及国家地区等都可以使用树形组件呈现。

使用树形组件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

树形组件的常用属性

属性 说明
treeData 树形组件数据源
autoExpandParent 是否自动展开父节点
checkable 节点前添加Checkbox复选框
defaultCheckedKeys 默认选中复选框的树节点
defaultExpandAll 默认展开所有树节点
disabled 设置树是否禁用
draggable 设置节点是否可拖拽
multiple 设置是否支持点选多个节点
showIcon 设置是否展示树节点标题前的图标
showLine 设置是否展示连接线

树形组件的常用事件

事件 说明
check 点击复选框触发
dragstart 开始拖拽时触发
dragend 结束拖拽时触发
expand 展开/收起节点时触发
load 节点加载完毕时触发
rightClick 在树节点上点击右键触发
select 点击树节点触发

树节点的属性

属性 说明
disableCheckbox 禁用树节点的复选框
disabled 禁用树节点
icon 设置自定义图标
key 树节点的唯一标示
selectable 设置节点是否可被选中
title 树节点标题

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/antd.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
<style type="text/css">
#app {
width: 300px;
margin: 0 auto;
padding: 15px;
border: 1px solid #888;
}
</style>
</head>
<body>
<div id="app">
<a-tree checkable v-bind="attrs" @select="this.onSelect" @check="this.onCheck"> </a-tree>
</div><script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
attrs: {
treeData: [{
//节点对象数组，可以包含子节点
title: "国内新闻",
key: "new1",
children: [{
title: "社会新闻",
key: "new1-1"
}, {
title: "社会新闻",
key: "new1-2"
}]
},
{
title: "国内新闻",
key: "new2",
children: [{
title: "社会新闻",
key: "new2-1"
}, {
title: "社会新闻",
key: "new2-2"
}]
}
],
defaultExpandedKeys: ["new1", "new2"],
defaultCheckedKeys: ["new1-2", "new2-2"]
}
},
methods: {
onSelect(selectedKeys, info) {
console.log("selected", selectedKeys, info)
},
onCheck(checkedKeys, info) {
console.log("onCheck", checkedKeys, info)
},
}
});
</script>
</body>
</html>

示例：

2、实践练习

总结：

Ant Design of Vue的栅格化系统特点是

  • 通过row在水平方向建立一组column（简写col）。
  • 内容应当放置于col内，并且，只有col可以作为row的直接元素。
  • 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用.col-8来创建。
  • 如果一个row中的col总和超过24，那么多余的col会作为一个整体另起一行排列。

使用选择器组件的情况是

  • 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
  • 当选项少时（少于5项），建议直接将选项平铺。

表单组件提供了以下3种排列方式：

  • 水平排列：标签和表单控件水平排列（默认）。
  • 垂直排列：标签和表单控件上下垂直排列。
  • 行内排列：表单项水平行内排列。

使用树形组件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

点赞 932

贡献者

上一篇： 自己写的jQuery拖动滑块
下一篇： Spring进一步学习
相关推荐
python开发_常用的python模块及安装方法
python开发_常用的python模块及安装方法
adodb：我们领导推荐的数据库连接组件bsddb3：BerkeleyDB的连接组件Cheetah-1.0：我比较喜欢这个版本的cheeta…
技术
日期：2022-11-24 点赞：878 阅读：9,086
Educational Codeforces Round 11 C. Hard Process 二分
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接：http://www.codeforces.com/contest/660/problem/CDes…
技术
日期：2022-11-24 点赞：807 阅读：5,561
下载Ubuntn 17.04 内核源代码
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
技术
日期：2022-11-24 点赞：569 阅读：6,410
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
技术
日期：2022-11-24 点赞：733 阅读：6,183
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式，并且由于涉及到要把拍到的照片显…
技术
日期：2022-11-24 点赞：512 阅读：7,820
Struts的使用
Struts的使用
一、Struts2的获取　　Struts的官方网站为：http://struts.apache.org/　　下载完Struts2的jar包,…
技术
日期：2022-11-24 点赞：671 阅读：4,903
Lomu

贡献者

这家伙很懒，只想把你留下。

文章
38
收藏
0
人气
108,027
粉丝
进主页
文章展示
  • [ 技术 ] python开发_常用的python模块及安装方法
  • [ 技术 ] Educational Codeforces Round 11 C. Hard Process 二分
  • [ 技术 ] 下载Ubuntn 17.04 内核源代码
  • [ 技术 ] 可用Active Desktop Calendar V7.86 注册码序列号
  • [ 技术 ] Android调用系统相机、自定义相机、处理大图片
  • [ 技术 ] Struts的使用
    • 个人收藏笔记记录
    我的笔记
    首页 首页 菜单 首页 首页