版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
实验1王船山个人简介网页的制作实验目的:掌握img、ul、h1、a等HTML元素的使用;掌握img元素的各种对齐方法;了解用CSS对ul进行美化的方法。掌握在DW中新建站点、新建网页、输入代码和测试网页的方法。实验任务:完成个人简历网页(网页效果图见本书素材文件目录下的“附录/效果图”)。实验步骤:1.编写HTML代码<!doctypehtml><html><head><metacharset="utf-8"><title>船山研究</title></head><body> <h2align="center">王船山简介</h2> <!--二级标题--> <imgsrc="images/wcs.jpg"width="213"height="188"/> <!--图像--> <p>王夫之,字而农,……并称明清之际三大思想家。</p> <!--段落--> <p>王夫之自幼跟随自己的父兄读书……船山先生。</p> <ul> <!--无序列表--><li>人物生平</li> <!--列表项--><li>历史评价</li> <li>人物故居</li></ul></body></html>2.编写CSS代码<style>img{float:left; } /*一个盒子浮动*/p{font-size:14px;color:#999}li{font-size:14px;float:left; /*多个盒子浮动*/list-style:none;margin-left:20px;}lia{text-decoration:none;color:#900;display:block;padding:6px10px;background-color:#ccc;}</style><h2align="center">王船山简介</h2> <!--二级标题--> <imgsrc="images/wcs.jpg"width="213"height="188"/> <p>王夫之,字而农,……并称明清之际三大思想家。</p> <p>王夫之自幼跟随自己的父兄读书……船山先生。</p> <ul> <!—无序列表--><li><ahref="#sp">人物生平</a></li><!--浮动后左右排列--><li><ahref="#sp">历史评价</a></li><li><ahref="show/guju.html">人物故居</a></li></ul>显示效果如图2-12所示。图2-12例2-9的运行效果实验思考:网页是怎样实现分栏布局的?有几种方法可以让圆形头像叠放在背景之上?圆角矩形和圆形图标是怎么实现的?实验2栏目框的制作实验目的:掌握浮动属性的运用,掌握清除浮动的方法,掌握使用flex布局制作可变宽度栏目框的方法。掌握制作栏目框的三种方法。掌握修改li元素列表图标的方法。实验任务:完成如图A-2所示的栏目框网页。图A-2栏目框实验思考:当新闻标题文本行过长时如何自动省略并添加省略号?flex布局的栏目框是如何实现标题列可变宽度,日期列固定宽度的?实验步骤:1.用float布局实现栏目框,代码如下<style>ul{margin:0;padding:0;list-style:none;}a{color:#666;text-decoration:none;}.news{width:420px;margin-left:20px;}.title{height:40px;line-height:40px; /*设置标题栏高度并使内容垂直居中*/border-bottom:2pxsolid#025483; }.titleh2{height:40px;float:left; /*标题左浮动*/font-size:18px;color:#000; margin:0; /*去掉h2标记的默认上下边界*/ }.title.more{float:right; /*“更多”右浮动*/height:22px; padding-right:10px; } /*“更多”右边保留一点间距*/ .morea{font-size:14px;text-decoration:none;color:#666;}.list_one{min-height:245px;/*设置内容区域的最小高度*/ margin-top:10px; /*设置第一条新闻上面的间隙*/}.list_oneli{line-height:30px;height:30px; /*垂直居中*/color:#999;font-size:14px;padding-left:2px; text-overflow:ellipsis; /*文本溢出则裁切*/ white-space:nowrap; /*强制不换行*/overflow:hidden; /*溢出内容隐藏*/}.list_onelib{float:right;font-weight:normal; /*日期右浮动*/}</style><divclass="news"><divclass="title"><h2>基层动态</h2><spanclass="more"><ahref="more.htm">更多>></a></span></div><ulclass="list_one"> <li><b>07-25</b><ahref="1.htm">计算机科学与技术系举办毕业生欢送会计算机科学与技术系举办毕业生欢送会</a></li> <li><b>07-25</b><ahref="1.htm">智能与信息工程学院举办反邪教宣传签名活动智能与信息工程学院举办反邪教宣传签名活动</a></li> <li><b>07-25</b><ahref="1.htm">会计系成功举办2017届学生毕业典礼</a></li> <li><b>07-25</b><ahref="1.htm">计算机科学与技术系举办毕业生</a></li> <li><ahref="1.htm">城市与旅游学院学生喜获佳绩</a><b>07-25</b></li> <li><ahref="5.htm">会计系举办2017年专接本交流会</a><b>07-06</b></li></ul></div>2.用flex布局实现栏目框,代码如下:<style>ul{margin:0;padding:0;list-style:none;}a{color:#666;text-decoration:none;}.news{width:480px;margin-left:20px;}.title{height:40px;line-height:40px; /*设置标题栏高度并使内容垂直居中*/border-bottom:2pxsolid#025483; padding-bottom:2px; display:flex; justify-content:space-between;}.titleh2{height:40px; /*标题左浮动*/font-size:22px;color:#000; border-bottom:4pxsolid#900; padding-right:40px; margin:0; /*去掉h2标记的默认上下边界*/ }.title.more{ display:block;height:22px; padding-right:10px; } /*“更多”右边保留一点间距*/ .morea{font-size:14px;text-decoration:none;color:#666;}.list_one{min-height:245px;/*设置内容区域的最小高度*/ margin-top:10px; /*设置第一条新闻上面的间隙*/ }.list_oneli{line-height:36px;height:36px; /*垂直居中*/color:#999;font-size:18px;padding-left:6px; text-overflow:ellipsis; /*文本溢出则裁切*/ white-space:nowrap; /*强制不换行*/overflow:hidden; /*溢出内容隐藏*/display:flex;justify-content:space-between;}.list_oneli::before{display:inline-block;content:"";width:0;height:0;border:6pxsolidtransparent;border-left-color:#c13432; margin-top:14px;}.list_onelia{flex-grow:1; text-overflow:ellipsis; /*文本溢出则裁切*/ white-space:nowrap; /*强制不换行*/overflow:hidden; /*溢出内容隐藏*/}.list_onelib{font-weight:normal;width:80px;text-align:right;}</style>3.为栏目框添加头条新闻区域,显示效果如图所示。图2-12例2-9的运行效果1)头条新闻区的实现。头条新闻区的左边是图片,右边是文本。当容器宽度发生变化时,希望比较窄的列(图片)宽度保持不变,比较宽的一列(文本)发生缩放。flex布局提供了flex-grow属性,用该属性可以方便地实现一列变宽,一列固定式的布局。代码如下。.toutiao{display:flex;flex-flow:row;width:100%;}.toutiaoimg{width:160px;order:1;display:block;}.toutiao.con_trtop{flex-grow:1;order:2;}<divclass="toutiao"><imgsrc="images/55.jpg"> <divclass="con_trtop"> <h2><ahref="show/278">船山先在韩国也有“铁杆粉丝”</a></h2> <p>韩国等地的40余名专家……。<span>[11-25]</span></p> </div></div>实验思考:1)当新闻标题文本行过长时如何自动省略并添加省略号?2)flex布局的栏目框是如何实现标题列可变宽度,日期列固定宽度的?实验三响应式布局网页的制作实验目的:掌握媒体查询、flex布局,自适应图片的实现方法。能运用媒体查询为网页在不同分辨率下分别设置不同样式。实验任务:完成响应式布局网页的布局代码和完整页面。实验步骤:1.用flex布局实现下图的布局关键代码如下:.main{ display:flex;flex-flow:row; /*设置main元素为弹性容器*/ min-height:200px;margin:0px;padding:0px;}.main>article{ margin:4px; padding:5px;background:#719DCA; flex:3;order:2;}.main>nav{ margin:4px;padding:5px; background:#FFBA41; flex:1; order:1;}.main>aside{ margin:4px; padding:5px; background:#FFBA41; flex:1; order:3;}header,footer{ margin:4px; padding:5px; min-height:50px; border:2pxsolid#FFBA41;}@mediaalland(max-width:640px){/*当屏幕小于640px时*/ .main{ flex-flow:column; /*子元素按纵轴方向排列*/ } .main>article,.main>nav,.main>aside{ order:0;/*按自然顺序排列*/ } .main>nav,.main>aside,header,footer{ min-height:50px; max-height:50px; }}2.用响应式布局实现如下页面效果要求实现汉堡式按钮,一列宽度固定,一列可变宽度等效果。实验思考:flex是怎样实现分栏布局的?有几种方法可以实现一列宽度固定,一列可变宽度?汉堡式按钮为何要选择<label>做结构标签。?Node.js实验一:ES6编程基础实验实验目的:掌握ES6中模板字符串、箭头函数、模块化等技术。1.第一个Node.js程序varname="张三";//声明变量letstr="欢迎你,"+name+"!";//连接字符串和变量console.log(str);//输出变量str将该程序命名为hello.js,使用nodehello.js即可运行。2.使用模板字符串varname="张三";//声明变量letstr=`欢迎你,${name}!`; //使用模板字符串console.log(str);//输出变量str3.使用函数functionhello(name) { //定义函数letstr=`欢迎你,${name}!`;returnstr;}console.log(hello("张三丰")); //调用函数4.使用箭头函数consthello=(name)=>(`欢迎你,${name}!`);//consthello=(name)=>{return`欢迎你,${name}!`};//或者这样写console.log(hello("张三丰")); //调用函数5.模块化(将函数声明写在hello.js中,将函数调用写在app.js中)hello.jsconsthello=(name)=>(`欢迎你,${name}!`);module.exports=hello;app.jsconsthello=require('./hello');constwelcome=hello("张三丰");console.log(welcome);思考:将hello.js改名为hello2.js,则app.js中是否导入函数是否需要改为:consthello=require('./hello2');6.模块化(hello.js中有多个函数)hello.jsconsthello=(name)=>(`欢迎你,${name}!`);//hello函数constellips(str,len)=>str.length>len?str.substring(0,len)+'...':str;consttrimtit=(tit,n)=>{ //trimtit函数 if(tit.length>10)returntit.slice(0,10)+"……"; elsereturntit;};constsum=(a,b)=>a+b; //sum函数module.exports={hello,sum,trimtit};app.jsconst{hello,sum,trimtit}=require('./hello');constwelcome=trimtit("张三士大夫士大夫大师傅士大夫的撒范德萨发达阿飞的地方丰");console.log(welcome);constadd=sum(3,15);console.log(add);实验五:浏览器端JavaScript实验实验目的:掌握在JavaScript、jQuery、Vue构建方式、微信小程序、React五种方式写点击元素改变元素内容和文字颜色的程序1.JavaScript思路:在onclick事件中用innerHTML属性改变元素内容,用style对象改变行内css属性。基本代码如下:<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title>第一个JavaScript程序</title><script>window.onload=function(){ //表示在网页载入完毕后执行函数 vardemo=document.getElementById("demo"); demo.onclick=msg; } //调用函数,函数名不能加括号functionmsg() { alert("Hello,theWEBworld!"); this.innerHTML="你点击了我"; this.style.border="3pxsolidred";} </script></head><body> <pid="demo">ClickHere</p><!--通过事件调用函数--> </body></html>2.jQuery写法思路:用$()选中元素,用.html()和.css()改变元素内容和样式。基本代码如下:<html><body><scriptsrc="jquery.min.js"></script> <!--引入jQuery环境--><script> $(document).ready(function(){ //页面载入后执行 $("#demo").click(function(){ $(this).html("你点击了我"); $("#demo").css("color","red"); $("#demo").css("textDecoration","underline");});});</script><pid="demo">ClickHere</p><!--通过事件调用函数--> </body></html>反思:jQuery中的html()函数相当于JavaScript中的innerHTML函数,事件处理函数中的$("#demo")都可以改写成$(this)。3.Vue的写法index.vue思路:在data函数中设置初始数据和样式,在methods方法中改变数据和样式。<template> <pid="demo"@click="msg":style="{color:tip}">{{title}}</p></template><script> exportdefault{ data(){ return{ title:'这是我的第一个项目', tip:'black' } }, methods:{ msg:function(){ //alert("Hello,theWEBworld!"); this.title="你点击了我一次"; this.tip=this.tip==='black'?'red':'black'; } } }</script>实验反思:本例中的Vue采用的是Vue构建方式写法,如果采用引入vue.js方式,将exportdefault替换成const{createApp}=Vue;createApp(即可。4.微信小程序写法思路:在data函数中设置初始数据和样式,在setData()方法中改变数据和样式。index.wxml中<viewclass="container"bindtap="handle"style="color:{{color}}">{{title}}<imagewx:if="{{flag}}"src="../images/haibao/62.jpg"data-flag="true"/><view>{{person.age}}</view></view>index.js中Page({ data:{ id:1,title:'王船山简介',flag:true,color:'black', person:{name:"王船山",age:"1619年10月-1692年2月" } }, handle:function(e){ wx.showToast({ title:'你点击了我', }) this.setData({ title:'王夫之故居',color:'red',flag:!e.target.dataset.flag}) }})反思:JavaScript涉及到DOM操作,获取DOM元素(网页元素),Vue不涉及获取DOM元素,Vue的插值表达式{{…}}只能用来绑定元素内容,绑定属性名要用:属性名形式。而微信小程序中的插值表达式{{…}}既能绑定元素内容又能绑定元素属性值。5.React写法思路:用useState()钩子函数设置初始数据,在setData()方法中改变数据和样式。使用构建方式创建项目,在App.js文件中写如下代码:import{useState}from"react";functionApp(){ const[data,setData]=useState({css:{color:'black'},title:"会变的图片"}) functionhandle(e){ setData({css:{color:'red'},title:"看到变化了吗"})console.log('点击了',e)}return(<><h2id="tit"onClick={handle}style={data.css}>{data.title}</h2></>);}exportdefaultApp;实验反思:React中的插值表达式为{…},插值表达式既能绑定元素内容又能绑定元素属性值。绑定属性值时,注意{}外面不要写引号。CSS属性值要写成JSON对象的形式,不能写成字符串。实验六:用4种框架分别实现简易新闻系统导读:以一个简易新闻系统的开发实例,分别用4种框架实现。实现零基础入门Node.js、微信小程序、Vue.js、React等前端框架技术。要实现的新闻系统首页和内容页如图所示:图1网页版新闻系统列表页图2网页版新闻系统详情页图3微信小程序端新闻列表页 图4微信小程序新闻详情页1.Node.js+Express思路:在Node.js的路由处理函数中渲染模板,并将数据发送给模板。在模板文件中绑定数据。·routes/index.js文件的代码varexpress=require('express');varrouter=express.Router();constconn=require('../db');router.get('/',function(req,res,next){//处理首页的路由,发送两个栏目框的数据给模板varquery='select*fromnewsorderbyiddesclimit6'; conn.query(query,function(err,rows,fields){ vartitle=rows; varquery2="select*fromnewswhereBigClassName='学生工作'orderbyiddesclimit6"; conn.query(query2,function(err,rows,fields){ vartitle2=rows; res.render('lm',{title:title,title2:title2,formatD:formatD}); }); });});router.get('/show',function(req,res,next){//处理内容页的路由,发送一条记录的数据给模板 vararticleID=req.query.id; //获取首页传来的文章ID varqry='SELECT*FROMnewsWHEREID='+conn.escape(articleID); conn.query(qry,function(err,rows,fields){ varqry2='UPDATEnewsSEThits=hits+1WHEREID='+conn.escape(articleID); vararticle=rows[0]; console.log(article); conn.query(qry2,function(err,rows,fields){ time=formatD(time); res.render('show',{ article:article }); }); });});module.exports=router;·views/lm.ejs文件的代码<divclass="news"><divclass="title"><h2>新闻动态</h2><spanclass="more"><ahref="more.htm">更多>></a></span></div><ulclass="list_one"><%for(leti=0;i<title.length;i++){%> <li><ahref="show?id=<%=title[i].ID%>"><%=title[i].title%></a><b><%=formatD(title[i].infotime)%></b></li><%}%> </ul></div><divclass="news"><divclass="title"><h2><%=title2[0].BigClassName%></h2><spanclass="more"><ahref="more.htm">更多>></a></span></div><ulclass="list_one"><%for(leti=0;i<title2.length;i++){%> <li><ahref="show?id=<%=title2[i].ID%>"><%=ellipsee(title2[i].title,18)%></a><b><%=formatD(title2[i].infotime)%></b></li><%}%> </ul></div>·views/show.ejs文件的代码<bodystyle="width:700px;margin:20pxauto;"> <h1><%=article.title%></h1> <divstyle="border:1pxdashed#666;height:1.8em;text-align:center"> 发布者:<%=article.user%>发布时间:<%=time%>点击次数<%=article.hits%> </div> <divstyle="font-size:16px;color:#999"><%-article.content%></div> </body>2.微信小程序实现简易新闻系统微信小程序、Vue.js和React访问Node.js后端输出的数据,都可以实现前后端分离的架构。在前后端分离架构下,后端的Node.js程序完全一样,其思路是输出json数据给前端。1.后端程序将routes/index.js文件的代码修改如下:router.get('/',function(req,res,next){ varquery='select*fromnewsorderbyiddesclimit6'; conn.query(query,function(err,rows,fields){ vartitle=rows; varquery2="select*fromnewswhereBigClassName='学生工作'orderbyiddesclimit6"; conn.query(query2,function(err,rows,fields){ vartitle2=rows; vartitall=[...title,...title2]; res.send(titall); }); });});router.get('/show',function(req,res,next){ letid=req.query.id; varquery='select*fromnewswhereid='+id; conn.query(query,function(err,rows,fields){ vartitle=rows[0]; console.log(rows); res.send(title); });});2.微信小程序端的代码index/index.js文件Page({ onLoad:function(options){ this.getList() }, getList:function(){ var_self=this wx.request({ url:'http://localhost:3000',//请求的Node.js端网址 methods:'GET', success:function(res){ console.log(res.data); //用于测试 _self.setData({ title:res.data.splice(0,6), //将返回的数组前半赋值给title title2:res.data.splice(0,6) //将返回的数组后半赋值给title2 }); } }) }, seeDetail:function(e){ //跳转到新闻详情页 varId=e.currentTarget.id;wx.navigateTo({url:'../show/show?Id='+Id,//url:'../show/show/'+Id,})}})index/index.wxml文件<viewclass="news"><viewclass="title"><view>新闻动态</view><textclass="more"><ahref="more.htm">更多>></a></text></view><viewclass="list_one"> <viewid="{{title[i].ID}}"wx:for="{{title}}"wx:for-index="i"wx:key="id"bindtap='seeDetail'><ahref="show?id={{title[i].ID}}">{{title[i].title}}</a><b>{{title[i].infotime}}</b></view></view></view><viewclass="news"><viewclass="title"><view>{{title2[0].BigClassName}}</view><textclass="more"><ahref="list?type={{title2[0].BigClassName}}">更多>></a></text></view><viewclass="list_one"> <viewid="{{title2[i].ID}}"wx:for="{{title2}}"wx:for-index="i"wx:key="id"bindtap='seeDetail'><ahref="show?id={{title2[i].ID}}">{{title2[i].title}}</a><b>{{title2[i].infotime}}</b></view> </view></view>show/show.js文件varIdconst{stripHtml}=require('../func/func.js');Page({data:{},onLoad:function(options){Id=options.Idconsole.log(options)this.loadDetail()},loadDetail:function(){if(Id!=""){var_self=this;wx.request({url:'http://localhost:3000/show?id='+Id, //发送Id给后端程序method:'GET',success:function(res){vartitle=res.data;title.content=stripHtml(title.content);_self.setData({title:title});}})}},})show/show.wxml文件<viewclass="header">{{title.title}}</view><viewclass="content">{{title.content}}</view>3.Vue前端实现新闻系统本例采用Vue构建模式,将HTML代码写在<template>中,CSS代码写在<style>中,JavaScript代码写在exportdefault{}中。1.新闻列表页的实现:App.vue<script> importaxiosfrom'axios'; exportdefault{ created(){ //页面载入时执行 this.getbooks(); }, data(){ return{ title:[], title2:[] } }, methods:{ getbooks(){ varself=this; axios.get('http://localhost:3000',{ params:{ } }).then(function(response){ self.title=response.data.splice(0,6); self.title2=response.data.splice(0,6); //console.log(response.status); //console.log(self.title); }).catch(function(error){ console.log('请求失败:'+error.status+','+error.statusText); }); }, } }</script><template> <divclass="news"> <divclass="title"> <h2>新闻动态</h2> <spanclass="more"><ahref="more.htm">更多>></a></span> </div> <ulclass="list_one"> <liv-for="(item,index)intitle":key="index"> <a:href="'show?id='+item.ID">{{item.title}}</a><b>{{time}}</b> </li> </ul> </div> <divclass="news"> <divclass="title"> <h2>新闻动态</h2> <spanclass="more"><ahref="more.htm">更多>></a></span> </div> <ulclass="list_one"> <liv-for="(item,index)intitle2":key="index"> <a:href="'show?id='+item.ID">{{item.title}}</a><b>{{time}}</b> </li> </ul> </div></template><style> .news{ width:480px; margin-left:20px; } .title{ height:40px; line-height:40px; /*设置标题栏高度并使内容垂直居中*/ border-bottom:2pxsolid#025483; padding-bottom:2px; display:flex; justify-content:space-between; } .titleh2{ height:40px; /*标题左浮动*/ font-size:22px; color:#000; border-bottom:4pxsolid#900; padding-right:40px; margin:0; /*去掉h2标记的默认上下边界*/ } .title.more{ display:block; height:22px; padding-right:10px; } /*“更多”右边保留一点间距*/ .morea{ font-size:14px; text-decoration:none; color:#666; } .list_one{ min-height:245px; /*设置内容区域的最小高度*/ margin-top:10px; /*设置第一条新闻上面的间隙*/ } .list_oneli{ line-height:36px; height:36px; /*垂直居中*/ color:#999; font-size:18px; padding-left:6px; text-overflow:ellipsis; /*文本溢出则裁切*/ white-space:nowrap; /*强制不换行*/ overflow:hidden; /*溢出内容隐藏*/ display:flex; justify-content:space-between; } .list_oneli::before{ display:inline-block; content:""; width:0; height:0; border:6pxsolidtransparent; border-left-color:#c13432; margin-top:14px; } .list_onelia{ flex-grow:1; text-overflow:ellipsis; /*文本溢出则裁切*/ white-space:nowrap; /*强制不换行*/ overflow:hidden; /*溢出内容隐藏*/ } .list_onelib{ font-weight:normal; width:80px; text-align:right; }</style>提示:要修改Vue项目的端口号,修改项目目录下以下2处即可:在package.json中,把"dev":"vite--port5173",在vite.config.js中,添加:exportdefaultdefineConfig({plugins:[vue()],server:{port:5173//将端口改为5173}})2.添加路由实现新闻列表页和新闻详情页。(1)src/App.vue<template><divid="app"><router-view></router-view></div></template>(2)router/index.jsimport{createRouter,createWebHistory}from'vue-router'constroutes=[{path:'/',name:'NewsList',component:()=>import('../views/NewsList.vue')},{path:'/news/:id',name:'NewsDetail',component:()=>import('../views/NewsDetail.vue')}]constrouter=createRouter({history:createWebHistory(),routes})exportdefaultrouter(3)views/NewsList.vue<template><divclass="news"><divclass="title"><h2>新闻动态</h2><spanclass="more"><ahref="more.htm">更多>></a></span></div><ulclass="list_one"><liv-for="(item,index)intitle":key="index"><router-link:to="'/news/'+item.ID">{{item.title}}</router-link><b>{{time}}</b></li></ul></div><divclass="news"><divclass="title"><h2>{{title2[0].title}}</h2><spanclass="more"><ahref="more.htm">更多>></a></span></div><ulclass="list_one"><liv-for="(item,index)intitle2":key="index"><router-link:to="'/news/'+item.ID">{{item.title}}</router-link><b>{{time}}</b></li></ul></div></template>其他代码与上一节中App.vue的代码完全相同。特别注意:虽然<router-link>标签中传递ID是采用的路由参数形式,但Vue会截获该路由,委托给axios传递参数给后端程序,而axios传递id参数时会采用url参数的形式,因此后端程序必须使用req.query.id方式获取参数。特别注意:(4)views/NewsList.vue<script>importaxiosfrom'axios';exportdefault{created(){this.getNewsDetail();},data(){return{news:null,isLoading:true}},methods:{getNewsDetail(){this.isLoading=true;varself=this;axios.get('http://localhost:3000/news',{params:{id:this.$route.params.id}}).then(function(response){self.news=response.data;self.isLoading=false;}).catch(function(error){console.log('请求失败:'+error.status+','+error.statusText);self.isLoading=false;});}}}</script><template><divclass="detail"><router-linkto="/"class="back-link">←返回新闻列表</router-link><divv-if="isLoading"class="loading">加载中...</div><divv-else-if="news"class="detail-content"><h1class="detail-title">{{news.title}}</h1><divclass="detail-meta"><spanclass="detail-time">{{time}}</span></div><divclass="detail-body"v-html="news.content"></div></div><divv-elseclass="not-found">新闻不存在</div></div></template><stylescoped>.detail{width:80%;margin:20pxauto;padding:20px;background:#fff;box-shadow:02px10pxrgba(0,0,0,0.1);}.back-link{display:inline-block;padding:8px16px;background:#025483;color:#fff;border-radius:4px;font-size:14px;margin-bottom:20px;text-decoration:none;}.back-link:hover{background:#013a5c;}.loading{text-align:center;padding:50px;color:#999;}.detail-content{line-height:1.8;}.detail-title{font-size:28px;color:#000;margin-bottom:20px;padding-bottom:10px;border-bottom:1pxsolid#eee;}.detail-meta{color:#999;font-size:14px;margin-bottom:20px;}.detail-body{font-size:16px;color:#333;}.detail-bodyimg{max-width:100%;height:auto;margin:10px0;}.detail-bodyp{margin-bottom:1em;}.not-found{text-align:center;padding:50px;color:#999;font-size:18px;}</style>4.React实现新闻系统前端本例中列表页对应NewsList()组件,新闻详情页对应NewsDetail组件。在根组件App中定义到这两个组件的路由。src/App.js代码import'./style.css';importReact,{useState,useEffect}from'react';import{Routes,Route,Link}from'react-router-dom';importaxiosfrom'axios';importNewsDetailfrom'./components/NewsDetail';functionNewsList(){const[data,setData]=useState([]);const[data2,setData2]=useState([]);useEffect(()=>{constfetchData=async()=>{constresult=awaitaxios('http://localhost:3000');console.log(result.data);setData(result.data.splice(0,6)); setData2(result.data.splice(0,6));};fetchData();},[]);return(<><divclassName="news"><divclassName="title"><h2>新闻动态</h2><spanclassName="more"><ahref="more.htm">更多>></a></span></div><ulclassName="list_one">
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 服务礼仪演讲竞赛课件
- 服务礼仪教程课件
- 房屋介绍素材课件
- 服务管理选题课件
- 飞舞的蜻蜓课件
- 服务本质的课件
- 防跳跃继电器课件
- 防烫伤教育小班课程课件
- 法庭简介课件
- 事业单位工程岗面试2026面试易错题专项考题专业面试试卷及解析
- 电商发展趋势课件
- 浙江省强基联盟2026-2027学年高二上学期10月阶段检测英语试卷(含解析)
- 2026新教材语文 第18课《昆明的雨》教学课件
- 校园欺凌事件分析调研报告(2026版)
- 2026中国人民大学学生就业创业指导中心招聘非事业编制工作人员1名笔试备考试题及答案解析
- 2026年中石化重型起重运输工程公司人员招聘考试备考试题及答案
- 26新二上语文全册1-8单元一课一练(含答案)
- 渗透型防水剂外墙施工方案
- 漠河林业局黑龙江大兴安岭地区生态林造林碳汇项目项目设计文件(公示版本)
- 清雪合同(标准版)
- 苏州市吴中区海绵城市专项规划(2020-2035)-规划图件
评论
0/150
提交评论