uni-app前端实例教程

最新推荐文章于 2024-08-05 09:48:11 发布
最新推荐文章于 2024-08-05 09:48:11 发布
阅读量316 收藏 1
点赞数 1
分类专栏： web前端 文章标签： 前端 uni-app javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44203782/article/details/129311614
版权

HbuilderX的开发界面分成了三个独立的板块
附上sql语句写在idea的xml文件里的

<!--写页面的HTML代码-->
<template>
	<view class="container">
		<uni-nav-bar left-text="< 返回" right-text="主页" title="论文管理系统" backgroundColor="#d3233b" color="#ffffff" fixed="true" @clickLeft="doLeft" />
		
		<uni-forms style="margin-top: 50rpx; margin-left: 50rpx;">
			<uni-forms-item label="题目:" style="width: 400rpx; float: left; margin-right: 50rpx;">
				<uni-easyinput v-model="title" placeholder="请输入题目"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="类型:" style="width: 400rpx; float: left; margin-right: 50rpx;">
				<uni-data-select
				      v-model="type"
				      :localdata="range"
				      @change="change"
				    ></uni-data-select>
			</uni-forms-item>
			<uni-forms-item>
				<button type="default" size="mini" style="margin-right: 15rpx;" @click="doSearch">查询</button>
				<button type="default" size="mini" @click="doAdd">添加</button>
			</uni-forms-item>
		</uni-forms>
		<uni-table stripe border>
			<uni-tr>
				<uni-th align="center">编号</uni-th>
				<uni-th align="center">题目</uni-th>
				<uni-th align="center">作者</uni-th>
				<uni-th align="center">论文类型</uni-th>
				<uni-th align="center">状态</uni-th>
				<uni-th align="center">发布时间</uni-th>
				<uni-th align="center">评论次数</uni-th>
				<uni-th align="center">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="p in paperList">
				<uni-td>{{p.id}}</uni-td>
				<uni-td>{{p.title}}</uni-td>
				<uni-td>{{p.author}}</uni-td>
				<uni-td>{{p.paperType}}</uni-td>
				<uni-td>{{p.state==0 ? '未发布':'已发布'}}</uni-td>
				<uni-td>{{p.publishDate}}</uni-td>
				<uni-td>{{p.cnt}}</uni-td>
				<uni-td align="center">
					<button type="primary" size="mini" style="margin-right: 10rpx;" @click="doUpdate(p.id)">修改</button>
					<button type="warn" size="mini" @click="doDelete(p.id)">删除</button>
				</uni-td>
			</uni-tr>
		</uni-table>
		<uni-pagination style="margin-top: 30rpx;" :current="pageIndex" :page-size="pageSize" :total="pageTotle" @change="pageChanged"></uni-pagination>
		<!-- 提示框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog 
				mode="base" title="通知" 
					:content="msg" 
					:duration="2000" 
					:before-close="true" 
					@close="close"
					@confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<!--写业务代码，最常见的：发送网络请求-->
<script>
	export default {
		data() {
			return {
				msg: null,
				paperList: null,
				title: null,
				type: null, 
				//分页相关
				pageIndex: 1,
				pageSize: 2,
				pageTotle: 0,
				range: [
				        { value: "应用型", text: "应用型" },
				        { value: "学术型", text: "学术型" }
				      ]
			}
		},
		methods: {
			//分页器被点击后触发
			pageChanged(p){
				console.log(p)
				this.pageIndex = p.current;
				var url = 'http://localhost:8070/paper/find_all?title='+this.title+'&type='+this.type+'&pageIndex='+p.current+'&pageSize='+this.pageSize
				this.requestPaperList(url);
			},
			//请求论文列表
			requestPaperList(uri){
				uni.request({
					url: uri,
					method: 'GET',
					success: (res) => {
						console.log(res.data);
						this.paperList = res.data.data;
						this.pageTotle = res.data.total;
					}
				})
			},
			doLeft(){
				this.msg = "点击了返回按钮"
				this.open();
			},
			open() {
				this.$refs.popup.open()
			},
			/**
			* 点击取消按钮触发
			*/
			close() {
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 */
			confirm(value) {
				this.$refs.popup.close()
			},
			doUpdate(id){
				uni.redirectTo({
					url: 'modify_paper?id='+id
				});
			},
			doAdd(){
				uni.redirectTo({
					url: 'add_paper'
				});
			},
			doSearch(){
				this.pageIndex = 1;
				var url = 'http://localhost:8070/paper/find_all?title='+this.title+'&type='+this.type+'&pageIndex='+this.pageIndex+'&pageSize='+this.pageSize
				this.requestPaperList(url);
			},
			doDelete(id){
				uni.request({
					url: "http://localhost:8070/paper/remove?id="+id,
					method: 'GET',
					success: (res) => {
						console.log(res.data);
						if(res.data.code == 200){
							this.pageIndex = 1;
							var url = 'http://localhost:8070/paper/find_all?title='+this.title+'&type='+this.type+'&pageIndex='+this.pageIndex+'&pageSize='+this.pageSize
							this.requestPaperList(url);
						} else {
							this.msg = res.data.msg;
							this.open();
						}
					}
				})
					
			},
			//下拉列表选择时触发
			change(e){
				console.log("e:", e);
			}
		},
		//页面加载完成之后执行
		onLoad() {
			var url = 'http://localhost:8070/paper/find_all?title='+this.title+'&type='+this.type+'&pageIndex='+this.pageIndex+'&pageSize='+this.pageSize
			this.requestPaperList(url);
		}
	}
</script>

<!--页面的效果-->
<style>
.container {
	padding: 20px;
	font-size: 14px;
	line-height: 24px;
}
</style>

------------------------------------------------------------------------------------------------

<!--写页面的HTML代码-->
<template>
	<view>
		<uni-nav-bar left-text="< 返回" title="添加论文" backgroundColor="#d3233b" color="#ffffff" fixed="true" @clickLeft="doLeft" />
		<!-- 提示框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog 
				mode="base" title="通知" 
					:content="msg" 
					:duration="2000" 
					:before-close="true" 
					@close="close"
					@confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
		<uni-forms style="width: 500rpx;">
			<uni-forms-item label="题目:">
				<uni-easyinput v-model="paperTitle" placeholder="请输入题目"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="作者:">
				<uni-easyinput v-model="author" placeholder="请输入作者"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="论文类型:">
				<uni-data-select
				      v-model="paperType"
				      :localdata="paperListTemp"
				      @change="changeType"
				    ></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="状态:">
				<uni-data-select
				      v-model="paperState"
				      :localdata="stateTemp"
				      @change="changeState"
				    ></uni-data-select>
			</uni-forms-item>
			<uni-forms-item>
				<button size="mini" type="primary" @click="doAdd">添加论文</button>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<!--写业务代码，最常见的：发送网络请求-->
<script>
	export default {
		data() {
			return {
				msg: null,
				paperTitle: null,
				author: null,
				paperType: null,
				paperState: 0,
				paperListTemp: [
					{vale : '学术型', text: '学术型'},
					{vale : '应用型', text: '应用型'}
				],
				stateTemp: [
					{vale : 0, text: '未发表'},
					{vale : 1, text: '已发表'}
				]
			}
		},
		methods: {
			doLeft(){
				this.msg = "点击了返回按钮"
				this.open();
			},
			open() {
				this.$refs.popup.open()
			},
			/**
			* 点击取消按钮触发
			*/
			close() {
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 */
			confirm(value) {
				this.$refs.popup.close()
			},
			changeType(e){
				this.paperType = e;
			},
			changeState(e){
				this.paperState = e;
			},
			doAdd(){
				uni.request({
					url: 'http://localhost:8070/paper/save',
					method: 'POST',
					data: {
						title: this.paperTitle,
						author: this.author,
						paperType: this.paperType,
						state: this.paperState
					},
					success: (res) => {
						console.log(res.data);
						if(res.data.code == 200){
							uni.redirectTo({
								url: 'paper'
							});
						} else {
							this.msg = res.data.msg;
							this.open();
						}
					}
				})
			}
		}
	}
</script>

<!--页面的效果-->
<style>
	
</style>

------------------------------------------------------------------------------------------------

<!--写页面的HTML代码-->
<template>
	<view>
		<uni-nav-bar left-text="< 返回" title="修改论文" backgroundColor="#d3233b" color="#ffffff" fixed="true" @clickLeft="doLeft" />
		<!-- 提示框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog 
				mode="base" title="通知" 
					:content="msg" 
					:duration="2000" 
					:before-close="true" 
					@close="close"
					@confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
		<uni-forms style="width: 500rpx;">
			<uni-forms-item label="题目:">
				<uni-easyinput v-model="paperTitle" placeholder="请输入题目"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="作者:">
				<uni-easyinput v-model="author" placeholder="请输入作者"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="论文类型:">
				<uni-data-select
				      v-model="paperType"
				      :localdata="paperListTemp"
				      @change="changeType"
				    ></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="状态:">
				<uni-data-select
				      v-model="paperState"
				      :localdata="stateTemp"
				      @change="changeState"
				    ></uni-data-select>
			</uni-forms-item>
			<uni-forms-item>
				<button size="mini" type="primary" @click="doAdd">添加论文</button>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<!--写业务代码，最常见的：发送网络请求-->
<script>
	export default {
		data() {
			return {
				id: null,
				msg: null,
				paperTitle: null,
				author: null,
				paperType: null,
				paperState: 0,
				paperListTemp: [
					{vale : '学术型', text: '学术型'},
					{vale : '应用型', text: '应用型'}
				],
				stateTemp: [
					{vale : 0, text: '未发表'},
					{vale : 1, text: '已发表'}
				]
			}
		},
		onLoad(options) {
			console.log("传来的id是："+options.id)
			this.id = options.id;
			uni.request({
				url: "http://localhost:8070/paper/find_by_id?id="+this.id,
				method: 'GET',
				success: (res) => {
					console.log(res.data);
					this.paperTitle = res.data.data.title;
					this.paperState = res.data.data.state;
					this.paperType = res.data.data.paperType;
					this.author = res.data.data.author;
				}
			})
		},
		methods: {
			doLeft(){
				this.msg = "点击了返回按钮"
				this.open();
			},
			open() {
				this.$refs.popup.open()
			},
			/**
			* 点击取消按钮触发
			*/
			close() {
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 */
			confirm(value) {
				this.$refs.popup.close()
			},
			changeType(e){
				this.paperType = e;
			},
			changeState(e){
				this.paperState = e;
			},
			doAdd(){
				uni.request({
					url: 'http://localhost:8070/paper/save',
					method: 'POST',
					data: {
						title: this.paperTitle,
						author: this.author,
						paperType: this.paperType,
						state: this.paperState
					},
					success: (res) => {
						console.log(res.data);
						if(res.data.code == 200){
							uni.redirectTo({
								url: 'paper'
							});
						} else {
							this.msg = res.data.msg;
							this.open();
						}
					}
				})
			}
		}
	}
</script>

<!--页面的效果-->
<style>
	
</style>

SQl语句用了where标签

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="demo.mapper.PaperMapper">
    <select id="findAll" resultType="Paper">
        SELECT
            DISTINCT p.*, (SELECT count(*) FROM t_comment WHERE p_id=c.p_id) AS cnt
        FROM
            t_paper AS p LEFT JOIN t_comment AS c
        ON
            p.id=c.p_id
        <where>

            <if test="title !='null' and title != ''">
                AND title like '%${title}%'
            </if>
            <if test="type !='null' and type != ''">
                AND paper_type=#{type}
            </if>
        </where>
        ORDER BY p.publish_date DESC
        LIMIT #{pageIndex}, #{pageSize}
    </select>
</mapper>
欧皇夏老板
关注
专栏目录
用uniapp写一个好看的登录页面
菜鸟教程
05-06 2215
到此这篇关于用uniapp写一个好看的登录页面的文章就介绍到这了,更多相关uniapp登录页面内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！茂名一技http://www.szsyby.net/茂名一技http://www.enechn.com/美文集http://www.tpyjn.cn/手游排行前十名http://www.bjkhrx.com/
uni-app开发实例
03-16
开发实例，包含页，tab自定义导航栏，滑动列表，搜索页面等
uni-app 从入门到精通，这篇超详细教程你绝对不能错过！
最新发布
hulianwangjike的博客
08-05 2958
持续每天分享好用的软件源码
uni-app实战教程
web分享客的博客
07-13 2217
uni-app：学习使用门槛低，vuejs语法，一套代码多种编译方式多个平台运行，抛开这些兼容性不说，单单用来开发小程序也是最佳的选择 一：下载配置Hbuilder X 新建uni-app项目，包含模板，可选择支持scss语法 二：项目目录结构 components: uni-app组件目录 pages：项目文件目录 static：静态资源文件（图片、字体图标） wxcomponents: 微信小程序组件目录 main.js : vue初始化入口文件 App.vue : 全局样..
uniapp前端页面-三天速成
qq_35869617的博客
01-20 897
uniapp前端页面-三天速成 视频链接：https://live.csdn.net/v/184622 资源链接：https://download.csdn.net/download/qq_35869617/76755146 详情点进视频链接里，里面有视频的介绍。 这里简单的说一下，该资源适合初学者，学了Vue的更易上手，傻瓜式填充，当然，如果大家做了什么网站，微信小程序，公众号，可以资源共享，在我的 个人介绍 里面有我的 个人介绍 哟~ ...
【uni-app】UniApp常用实例参考笔记（自己开发项目用）
【敦厚的曹操】的专栏
03-10 286
UniApp常用实例参考笔记（自己开发项目用）
uni-app前端黑马商城讲解文档
09-02
《uni-app前端黑马商城讲解文档》是一份专为开发者准备的详细教程，旨在深入解析uni-app框架在构建黑马商城项目中的应用。uni-app是一个多端开发框架，它允许开发者使用一套代码实现跨平台的移动应用开发，覆盖了iOS...
uni-app+unicloud仿奈雪の茶点餐
06-22
通过unicloud SDK，uni-app前端可以轻松调用这些云函数，完成前后端的数据交互。 在前后端联调过程中，开发者需要掌握RESTful API的设计原则，确保接口的清晰和规范。unicloud的云数据库服务可以提供实时的CRUD操作...
uni-app实战仿糗事百科app开发视频教程及完整的后台源码及数据库
03-15
【前端完整代码】仿糗事百科 【完整版】数据库 后端完整源码 socket测试工具 前后台完整的项目案例实例讲解，附所有的前后台资源 ，是非常不错的学习资料。
uni-app介绍基本框架信息及简单实例
2201_75957608的博客
06-19 1022
【代码】简单的待办事项列表应用。
uni-app前后端实战课悦读全套视频教程源码资源百度云资源
07-30
uni-app 前后端实战课 -《悦读》百度云视频 uni-app实战教程 – 《悦读》项目实战以uniapp为基础后端使用php+mysql，详细讲解了跨平台应用开发的方方面面！包含接口安全、接口交互、多图上传、服务器部署、uni-app开发常用知识点讲解！是一套非常全面的uniapp实战教程！
uni-app前后端实战课悦读全套视频教程
08-29
uni-app前后端实战课悦读全套视频教程源码资源 .
uni-app前后端实战课悦读全套视频教程源码资源
04-26
uni-app前后端实战课悦读全套视频教程源码资源https://pan.baidu.com/s/1uC7M8N2fyKnUjwoPsZNLzw内含提取码
uni-app 之组件 入门教程 uniapp在线教程 uni app视频教程
06-20
通过这三个视频教程——"uni-app_之组件_入门教程_uniapp在线教程_uni_app视频教程-202042213529259_30599.zip"、"uni-app_之组件_入门教程_uniapp在线教程_uni_app视频教程-202042213524160_82447.zip"和"uni-app_...
uniapp前端页面
weixin_43845922的博客
07-05 346
uniapp
uni-app简易教程
qq_42131193的博客
07-21 5244
uni-app使用uni-app制作app和小程序（基础）1.创建项目1.1项目目录结构2 项目运行2.1浏览器运行2.2模拟器运行2.3微信开发者工具运行3.项目发布4.注意事项`4.1尺寸单位4.2与H5的差异4.3页面配置5.UI框架使用（以uView为例）5.1安装配置如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程
UniApp 实战指南
利昂的技术存档
01-07 2660
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。 打包原生 APP 申请 AppKey 登录 DCloud 管理应用 点击要打包的项目 这里 android 可以使用 com.android....
Uni-app快速入门+项目实战
qq_43405603的博客
06-20 915
对uni-app进行全局配置的，决定页面文件的路径、窗口样式、原生的导航栏、底部的tabbar，它类似于微信开发者工具小程序中的app.json。简介：Uni-app是基于Vue+微信小程序体系，且基Uni-app可以开发 微信小程序、H5、安卓app、ios-app等多端项目。9、入口文件main.js——跟以前vue的差不多，引入vue，实例化一个对象并且挂载到页面上去。11、uni-app生命周期——支持vue声明周期，新增了应用生命周期和页面生命周期。6、编译配置——vue.config.js。
uni-app前端登录
08-03
总结：以上是一个简单的uni-app前端登录流程，通过创建登录页面、数据绑定、发起登录请求、处理登录结果、登录成功后的操作以及错误处理等步骤，实现了一个基本的前端登录功能。当然，具体的实现还可以根据实际需求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值