前端页面修改new

合集下载

codepen的使用

codepen的使用

CodePen的使用1. 什么是CodePenCodePen是一个在线的前端开发环境,旨在帮助开发人员共享和测试HTML、CSS和JavaScript代码片段。

它提供了一个直观的界面,集成了编辑器、预览窗口和代码分享功能,使得我们能够在实时预览的环境中进行开发和调试。

CodePen也是一个社交平台,用户可以浏览其他开发者的作品,并对其进行评论和点赞。

2. 注册和登录要使用CodePen,我们首先需要注册一个账号。

在CodePen的官网上,点击右上角的”Sign Up”按钮,填写必要的信息并点击”Create Account”完成注册。

完成注册后,我们可以根据自己的需求,选择不同的账户类型,包括免费账户和付费账户。

一旦注册完成,我们就可以使用我们的账号登录到CodePen上了。

在CodePen的官网上,点击右上角的”Sign In”按钮,输入正确的用户名和密码,然后点击”Sign In”按钮即可成功登录到CodePen。

3. 创建和编辑项目登录后,我们可以在CodePen上创建新的项目。

点击页面的”New Pen”按钮,即可打开一个新的代码编辑窗口。

在这个窗口中,我们可以输入HTML、CSS和JavaScript代码,并实时查看代码运行结果。

3.1 编辑HTML在CodePen的编辑窗口中,左侧的编辑器默认是HTML编辑器。

我们可以在其中编写HTML代码,包括定义标签、设置属性、编写文本内容等。

同时,CodePen还提供了一些常用的HTML模板,我们可以直接选择相应的模板来快速启动项目。

3.2 编辑CSS在CodePen的编辑窗口中,中间的编辑器默认是CSS编辑器。

我们可以在其中编写CSS代码,设置样式、定义布局、添加动画效果等。

CodePen支持使用Sass、Less 和SCSS等CSS预处理器,以及autoprefixer插件来自动添加浏览器厂商前缀。

3.3 编辑JavaScript在CodePen的编辑窗口中,右侧的编辑器默认是JavaScript编辑器。

ajax请求添加自定义header参数代码

ajax请求添加自定义header参数代码

ajax请求添加⾃定义header参数代码我就废话不多说了,⼤家还是直接看代码吧~$.ajax({type: "post",url:"http://127.0.0.1:4564/bsky-app/template/testPost",contentType: "application/json;charset=utf-8",data :JSON.stringify({"bodyName":"sdfsdf","date":"2017-11-28 07:34:01","price": 10.5,"tbId": 1}),dataType: "json",beforeSend: function (XMLHttpRequest) {XMLHttpRequest.setRequestHeader("token", "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxOD.....");},success: function (data) {alert(data);},error:function(error){console.log(error);}});beforeSend: function (XMLHttpRequest) {XMLHttpRequest.setRequestHeader("token", "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxOD.....");},其中,token是服务端⾃定义的header参数补充知识:ajax请求携带cookie和⾃定义请求头header(跨域和同域)ajax请求携带cookie、⾃定义header总结:错误:1.ajax请求时是不会⾃动带上cookie的,要是想让他带上的话,必须设置withCredential为true。

jsp页面跳转

jsp页面跳转

五种JSP页面跳转方法详解文章分类:Web前端1. RequestDispatcher.forward()是在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servlet or JSP到另外一个Servlet,JSP 或普通HTML文件,也即你的form提交至a.jsp,在a.jsp用到了forward()重定向至b.jsp,此时form提交的所有信息在 b.jsp都可以获得,参数自动传递. 但forward()无法重定向至有frame的jsp文件,可以重定向至有frame的html文件,同时forward()无法在后面带参数传递,比如servlet?name=frank,这样不行,可以程序内通过response.setAttribute("name",name)来传至下一个页面。

重定向后浏览器地址栏URL不变。

例:在servlet中进行重定向public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{response.setContentType("text/html; charset=gb2312");ServletContext sc = getServletContext();RequestDispatcher rd = null;rd = sc.getRequestDispatcher("/index.jsp"); //定向的页面rd.forward(request, response);}通常在servlet中使用,不在jsp中使用。

2. response.sendRedirect()是在用户的浏览器端工作,sendRedirect()可以带参数传递,比如servlet?name=frank传至下个页面,同时它可以重定向至不同的主机上,sendRedirect()可以重定向有frame.的jsp文件.重定向后在浏览器地址栏上会出现重定向页面的URL例:在servlet中重定向public void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{response.setContentType("text/html; charset=gb2312");response.sendRedirect("/index.jsp");}由于response是jsp页面中的隐含对象,故在jsp页面中可以用response.sendRedirect()直接实现重定位。

数据库SQL常用增删改查语句

数据库SQL常用增删改查语句

数据库SQL常⽤增删改查语句1:连接数据库conn.php⽂件<?php// 连接到数据库$servername = "域名和端⼝号";$username = "root";$password = "⾃⼰的数据库密码";$dbname = "数据库名";// 创建连接$conn = new mysqli($servername, $username, $password);$conn->select_db($dbname);// 检测连接if ($conn->connect_error) {die("Connection failed: " . $conn->connect_error);} else {$conn->query('set names utf8');}//测试mysqli 是否可⽤// $msg = phpinfo();// echo $msg;//关闭数据库// $conn->close();2:增加数据<?phpi nclude 'conn.php';//连接数据库的⽂件$title = $_REQUEST['title'];$detail = $_REQUEST['detail'];$idea = $_REQUEST['idea'];wq_list(⾃⼰建⽴的数据库名)$sql = "insert into wq_list(wq_title,wq_details,wq_idea,submission_date) values('$title','$detail','$idea',now());"; //⾃⼰建⽴的数据库⾥的数据表⾥的字段内容$ret = $conn->query($sql);//判断是否成功if($ret > 0) {echo '{"msg":"success","flag":true}';} else {echo '{"msg":"failed","flag":false}';}$conn->close();?>3:删除数据<?phpinclude 'conn.php';$id = $_REQUEST['id'];$sql = "delete from wq_list where wq_id = $id";$ret = $conn->query($sql);if($ret > 0) {echo '{"msg":"success","flag":true}';} else {echo '{"msg":"failed","flag":false}';}$conn->close();?>4:修改数据update<?phpinclude 'conn.php';$title = $_REQUEST['title'];$detail = $_REQUEST['detail'];$idea = $_REQUEST['idea'];$sql = " update wq_list set wq_title = $title,wq_details=$detail where wq_sid=$sid,"; //update 表名 set 字段=值,字段=值 where sid = id值$ret = $conn->query($sql);if($ret > 0) {echo '{"msg":"success","flag":true}';} else {echo '{"msg":"failed","flag":false}';}$conn->close();?>5:查询数据<?phpinclude './base/connectDb.php';// header("Content-type: text/html; charset=utf-8");$sql = "select * from wq_list order by wq_id ";$result = $conn->query($sql);$ret_arr = array();if($result->num_rows >= 0) {while($row = $result->fetch_assoc()) {array_push($ret_arr,$row);}} else {array_push($ret_arr,null);echo '{"msg":"error","flag":false}';die("error");}echo json_encode($ret_arr);$conn->close();?>使⽤以上代码时需要:1:在后台建⽴⾃⼰的数据库并且创建数据表,数据表包含前端页⾯所对应的字段名称2:把域名,端⼝号,数据库密码,数据库名称,数据表名改为⾃⼰的3:结合前端发送ajax 到后台发送数据和获取数据来使⽤。

Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案

Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案

Web前端页⾯的浏览器兼容性测试⼼得(三)总结⼀些IE8兼容问题的解决⽅案由于IE8不⽀持HTML5,⽽它⼜是Win7的默认浏览器,我们即使讨厌它,在这⼏年却也拿它没办法。

最近做了个需要兼容IE8的项⽬,不可避免地⽤了HTML5+CSS3,甚⾄canvas和svg,做兼容⼯作的时候不禁叫苦不迭。

⼀个项⽬下来后,倒是收集了⼀些志于让HTML5兼容IE8的库,还有⼀些零散的代码和优雅降级的技巧,整理如下。

IE8的兼容⼯作是个⼤活,这篇⽂章还不完整,肯定有很多疏漏和不⾜,望读者能在评论区指正,同时我也会在之后的项⽬中逐渐丰富这篇⽂章。

⼀、HTML5标签兼容⽅案:html5shiv.jsGitHub地址:IE8不⽀持HTML5的新标签,如<header>、<nav>等标签在IE8⽆法渲染。

html5shiv.js可帮助IE6-8浏览器兼容HTML5语义化标签。

使⽤⽅法:在页⾯中引⽤html5shiv.js⽂件。

必须添加在页⾯的<head>元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js ⽂件不能在页⾯底部引⽤。

⼆、CSS3媒体查询兼容⽅案:Respond.jsGitHub地址:IE8不⽀持CSS媒体查询,对响应式设计⼤⼤不利。

Respond.js可帮助IE6-8兼容“min/max-width”媒体查询条件。

使⽤⽅法:在页⾯中所有css⽂件的引⽤位置之后引⽤Respond.js。

⽽且Respond.js的引⽤得越早,⽤户看到页⾯闪烁的机会越⼩。

三、CSS3字体单位“rem”兼容⽅案:rem.jsGitHub地址:CSS3引⼊了新的字体⼤⼩单位rem,与em的“相对于其⽗元素来设置字体⼤⼩”的功能不同,rem是相对于根元素<html>的字体⼤⼩⽐率单位,成了⽬前主流的单位之⼀。

IE9+开始⽀持,IE8就只能通过引⼊js库来⽀持了。

使⽤⽅法:在页⾯中引⽤rem.js⽂件。

js调用api接口实例

js调用api接口实例

JS调用API接口实例在Web开发中,我们经常需要通过调用API接口来获取数据或完成一些操作。

JavaScript作为一种常用的前端开发语言,可以通过AJAX技术来实现与API接口的交互。

本文将介绍如何使用JavaScript调用API接口,并提供一个实例来演示具体的代码实现。

一、AJAX简介AJAX(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术。

它通过在后台与服务器进行数据交换,实现局部刷新页面,而不需要重新加载整个页面。

AJAX使用XMLHttpRequest对象来与服务器进行通信,并可以接收来自服务器的数据,然后使用JavaScript来更新页面上的内容。

二、使用JavaScript调用API接口的步骤要使用JavaScript调用API接口,需要经过以下几个步骤:1.创建XMLHttpRequest对象:使用new XMLHttpRequest()来创建一个XMLHttpRequest对象。

2.设置请求参数:通过open()方法设置请求的方法(GET、POST等)、URL和是否异步。

3.发送请求:通过send()方法发送请求到服务器。

4.监听响应:使用onreadystatechange事件监听请求的状态变化,并在状态为4(完成)时处理服务器的响应。

5.处理响应数据:在请求完成后,可以通过responseText或responseXML属性获取服务器返回的数据。

下面是一个示例代码,演示了如何使用JavaScript调用API接口获取数据:// 创建XMLHttpRequest对象var xhr = new XMLHttpRequest();// 设置请求参数xhr.open('GET', ' true);// 发送请求xhr.send();// 监听响应xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 处理响应数据var responseData = JSON.parse(xhr.responseText);console.log(responseData);}};在上面的代码中,我们通过GET方法向``发送了一个异步请求,并在请求完成后打印了服务器返回的数据。

springboot使用i18n进行国际化

springboot使⽤i18n进⾏国际化1、i18n介绍 i18n(其来源是英⽂单词 internationalization的⾸末字符i和n,18为中间的字符数)是“国际化”的简称。

在资讯领域,国际化(i18n)指让产品(出版物,软件,硬件等)⽆需做⼤的改变就能够适应不同的语⾔和地区的需要。

对程序来说,在不修改内部代码的情况下,能根据不同语⾔及地区显⽰相应的界⾯。

2、页⾯元素国际化: pom⽂件引⼊thymeleaf依赖:<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency> 新增⼀个html⽂件hello.html:<!DOCTYPE html><html xmlns="/1999/xhtml"xmlns:th=""<head><title>hello</title></head><body><span><label th:text="#{welcome}"></label></span></body></html> SpringBoot 默认⽀持国际化的,在resources/下定义国际化⽂件,名称必须以messages开头,因为 MessageSourceAutoConfiguration 类中指定了前缀。

messages.propertieswelcome = 欢迎使⽤i18n(默认)messages_zh_CN.propertieswelcome = 欢迎使⽤i18n(中⽂)messages_en_US.propertieswelcome = welcome to use i18n(english) 访问接⼝@Controllerpublic class HelloController {@RequestMapping(value = "hello")public String hello() {return "hello";}}3、修改默认messages配置前缀 上⾯使⽤的是messages默认的配置,即直接放在resources/⽬录下,⼀般项⽬中会使⽤⾃⼰的⽬录存放,如放在resources/i18n/⽬录下 在application配置中添加#i18nspring:messages:encoding: UTF-8basename: i18n/messages 加好之后重新访问即可4、代码中使⽤国际化 //注⼊ MessageSource 对象,通过 getMessage ⽅法获取信息@Autowiredprivate MessageSource messageSource;//使⽤messageSource.getMessage("welcome", null, locale);说明:第⼀个参数是国际化⽂件的key,第⼆个参数是key对应value中的占位符数据(如welcome=欢迎使⽤{0}中的{0}就是占位符,0表⽰是第⼀个,对应数据中的第⼀个值),第三个是当前区域5、会话区域解析器SessionLocaleResolver 注⼊ Bean//注⼊ Bean,会话区域解析器只针对当前会话有效@Beanpublic LocaleResolver localeResolver() {SessionLocaleResolver slr = new SessionLocaleResolver();//设置默认区域,slr.setDefaultLocale(Locale.ENGLISH);return slr;} 接⼝控制器: @RequestMapping("/i18n")public String changeSessionLanauage(HttpServletRequest request, String lang){System.out.println(lang);if(NG_ZH.equals(lang)){//代码中即可通过以下⽅法进⾏语⾔设置request.getSession().setAttribute(SessionLocaleResolver.LOCALE_SESSION_ATTRIBUTE_NAME,new Locale("zh","CN"));}else if(NG_EN.equals(lang)){request.getSession().setAttribute(SessionLocaleResolver.LOCALE_SESSION_ATTRIBUTE_NAME,new Locale("en","US"));}return "redirect:/hello";}其中request.getSession().setAttribute(SessionLocaleResolver.LOCALE_SESSION_ATTRIBUTE_NAME,new Locale("zh","CN"));⽤于切换当前会话区域 前端页⾯hello.html修改:<!DOCTYPE html><html xmlns="/1999/xhtml"xmlns:th=""><head><title>hello</title><script th:src="@{js/jquery.min.js}"></script><script th:src="@{js/hello.js}"></script></head><body><p><label th:text="#{welcome}"></label></p><br/><span th:text="#{lang}"></span><select id="locales"><option value=""></option><option value="zh" th:text="zh"></option><option value="en" th:text="en"></option></select></body></html> hello.js⽂件$(function () {$("#locales").change(function() {var lang = $("#locales").val();if (lang != "") {window.location.replace("/i18n?lang=" + lang);}});}); 需要同时作⽤于Cookie时,修改接⼝控制器:@RequestMapping("/i18n2")public String changeSessionLanauage2(HttpServletRequest request, HttpServletResponse response, String lang){LocaleResolver localeResolver = RequestContextUtils.getLocaleResolver(request);if(NG_ZH.equals(lang)){localeResolver.setLocale(request, response, new Locale("zh","CN"));}else if(NG_EN.equals(lang)){localeResolver.setLocale(request, response, new Locale("en","US"));}return"redirect:/hello";}6、使⽤参数进⾏语⾔切换使⽤拦截器来拦截请求接⼝中的参数来实现语⾔切换 注⼊区域切换拦截bean@Beanpublic LocaleChangeInterceptor localeChangeInterceptor() {LocaleChangeInterceptor lci = new LocaleChangeInterceptor(); //对请求路径中的参数lang进⾏拦截lci.setParamName("lang");return lci;}@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(localeChangeInterceptor());} hello.html添加修改:点击切换语⾔:<a href="/hello?lang=zh_CN">简体中⽂</a>&nbsp;&nbsp;<a href="/hello?lang=en_US">English(US)</a><br>项⽬启动后点击链接测试效果即可7、访问乱码问题解决。

vue sqlite3 增删改查写法

一、Vue框架介绍Vue.js是一款流行的前端JavaScript框架,它能够帮助开发者构建用户界面。

Vue提出了一种全新的前端开发理念,它采用了组件化的思想,使得前端开发更加模块化和灵活。

通过Vue,开发者可以轻松地管理页面状态、数据绑定、事件监听等功能。

在Vue的生态系统中,也有很多周边库和插件,用来扩展Vue的功能。

二、SQLite3数据库介绍SQLite3是一款轻量级的关系型数据库管理系统,它被广泛应用在移动设备、嵌入式设备以及小型全球信息站的开发中。

相比于传统的关系型数据库系统,SQLite3的特点在于无需配置、零配置、无服务器和无需安装。

它支持多种编程语言调用,包括但不限于C、C++、Java、Python等。

SQLite3的数据存储在一个单一的文件中,数据库操作简单、高效。

三、在Vue中使用SQLite3的方法在现代的Web应用程序中,也经常需要使用数据库来存储和管理数据。

在Vue中使用SQLite3可以借助一些第三方插件或者进行简单封装。

在Vue的生态系统中,有一些与SQLite3相关的插件可以简化与SQLite3的交互过程。

四、Vue中SQLite3的增删改查写法1. 增加数据在Vue中与SQLite3数据库进行数据插入的操作,可以通过以下步骤:(1)创建数据库连接:在Vue的methods中创建数据库连接,引入SQLite3的模块;(2)执行SQL语句:通过执行SQL语句来插入数据,首先编写插入数据的SQL语句,然后通过数据库连接执行该语句;(3)数据处理:根据执行SQL语句的返回结果进行数据处理,例如显示插入成功的提示信息或者刷新页面显示最新的数据。

2. 删除数据在Vue中与SQLite3数据库进行数据删除的操作,可以通过以下步骤:(1)创建数据库连接:同样在Vue的methods中创建数据库连接,并引入SQLite3的模块;(2)执行SQL语句:编写删除数据的SQL语句,通过数据库连接执行该语句;(3)数据处理:根据执行SQL语句的返回结果进行数据处理,例如显示删除成功的提示信息或者刷新页面显示最新的数据。

使用JsonFormat和DataTimeFormat前后端时间格式转换

使⽤JsonFormat和DataTimeFormat前后端时间格式转换情景今天在进⾏前后台对接的时候(SPring Boot/cloud)与前端Vue进⾏对接,在这个过程当中,发现有⼀些前端页⾯的表格内容时间部分也就是创建时间和修改时间字段显⽰是正常的符合年⽉⽇时分秒的⼀个区分,但是有⼀些页⾯的字段就是简单的时间戳,这就⽐较让⼈⼼烦,我⾸先想到的是使⽤new SampleDateFormat的⽅法待到将值给DTO的时候,直接将时间定义为字符串形式,并给他传递格式化后的时间内容,但是这样显然是⽐较low的,因为现在做的前后端的数据对接⽽不是纯后端的格式化打印,尽管如此还是先将SampleDateFormat放到这⾥,防⽌遗忘:import java.text.SimpleDateFormat;import java.util.Date;public class Main{public static void main(String[] args){Date date = new Date();String strDateFormat = "yyyy-MM-dd HH:mm:ss";SimpleDateFormat sdf = new SimpleDateFormat(strDateFormat);System.out.println(sdf.format(date));}}但是我随后就想到,之前未拆分服务之前部分格式正常,可能是使⽤了什么⽅法或者是注解,我没有使⽤(体谅⼩弟Java功⼒浅薄),于是简单⼀番查阅:使⽤到了这样的⼀个注解的DTO,返回给前端就可以正常展⽰/**更新时间*/@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")private Date uteTime;学习记录使⽤场景当我们从数据库获取时间传到前端进⾏展⽰的时候,我们⽆法直接得到满意时间格式因为Date在数据库中的时候展⽰的内容还是易读式的时间格式,但取出值的时候就变成了不明所以的时间戳1602672098000这种类型,@JsonFormat注解就能够⼗分出⾊的解决这个头疼的问题,只要在返回结果集包裹的时间属性上使⽤上述的写法,就能返回正确格式。

intellij idea 设置group原则 -回复

intellij idea 设置group原则-回复IntelliJ IDEA 是一款功能强大的集成开发环境(IDE),广泛用于开发各种编程语言的应用程序。

为了方便开发者的管理和组织项目文件,IntelliJ IDEA 提供了一系列的设置选项,其中之一就是group 设置。

本文将以"IntelliJ IDEA 设置group 原则" 为主题,一步一步回答相关问题。

一、什么是group?在IntelliJ IDEA 中,group 是将项目根据逻辑、类型或功能等因素进行归类和组织的一种方式。

通过group 设置,可以将项目中的文件和目录进行分组,使项目的结构更加清晰和易于管理。

二、为什么需要进行group 设置?在一个复杂的项目中,可能包含大量的文件和目录,如果没有进行合理的group 设置,会导致项目的结构混乱、文件难以找到,影响开发效率和代码维护。

通过合理的group 设置,可以将相关文件和目录放置在一起,便于开发人员理解项目结构、快速定位所需文件,并提高开发效率。

三、group 设置的原则是什么?1. 逻辑关联:将具有逻辑关系的文件和目录放置在同一个group 下。

例如,将相关的Java 类文件放在同一个group 下,将相关的资源文件放在同一个group 下等。

2. 类型归类:按照文件类型将文件进行归类。

例如,将Java 类文件放在一个JAVA group 下,将HTML 文件放在一个WEB group 下等。

这样可以使不同类型的文件更有条理,方便开发人员快速定位。

3. 功能划分:根据不同的功能将文件进行划分,例如将前端页面文件放在一个Frontend group 下,将后端逻辑文件放在一个Backend group 下等。

这样可以使项目结构更加清晰,方便团队成员之间的协作和沟通。

4. 按需组织:根据项目的具体需求进行组织,避免过度分组。

过多的group 设置可能会导致项目结构过于复杂,反而增加了维护成本。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

1.注册页面,登录页面,账号不用太复杂,只用用户名密码即可 ===
2.商品详细页面,恢复商品颜色比例 | 只录主色 ===
3.商品详细页面,商品编码改成商品货号 ===
4.商品详细页面,sku 显示出来 ===
5.商品详细页面,发起团购砍掉 ===
6.商品详细页面,尺码:没有的话 就是显示不分;颜色:同样 | 不同品种的商品 有的
叫尺码 有的叫规格 ===

7.商品详细页面,三套图片:上边是一套商品不同角度的基本图片(第一张一定是宏观角度
拍摄的图片,同时用于缩略),下边的图片是真实使用环境中展示的图片,还有一个是尺码图
片。===

8.商品详细页面,显示多少钱以上免运费 | 满多少免运费,低于200运费15 ===
9.商品详细页面,收藏此商品是收藏到本地电脑上面 | 收藏到账号里 ===
10.商品详细页面,各种活动再斟酌一下 | 类似凡客优惠提示 | 返积分 代金券 | 限时
抢购 | 组合购买?

11.商品详细页面,商品介绍中的商品的一些属性及属性值去掉,都放到规格参数里面 ===
12.商品详细页面,后台部分商品编辑中添加包装清单,售后服务===
13.商品详细页面,评论以插件的形式开发
14.商品详细页面,商品咨询砍掉 | 保留 ===
15.商品详细页面,商品介绍里面添加商品描述,去掉商品亮点和商品保养 | 保养参照凡
客洗涤,可以添加文字 ===

16.商品详细页面,砍掉商品指数,图标的形式显示在商品检索中 | 指数保留,指数是
特殊的属性 ===

17.商品详细页面,看过此商品的用户还看过换成购买此商品的顾客还购买过,左右对
调 | 不用左右对调 ===

18.网页头部 官方博客 帮助中心 网站地图 放到底部导航, 我的账户砍掉,鹏程旗下网
站文字放到logo附近,加上我的订单,搜索框和购物车参照京东,在线客服 | 搜索框
变窄 后加关键字 ===
19.商品详细页面,添加库存状态,分现货和预定两种情况,预定要注明 预定商品不支持货到
付款以及无理由退货 ===

20.商品详细页面,添加支付方式 ===
21.商品详细页面,添加尺码和颜色汇总信息 | 去掉,没意义 ===
22.商品详细页面. 市场价和销售价交换位置,市场价淡化 删除线,销售价加大突出 ===
23.商品详细页面. 上方用户评论砍掉 ===
24.商品详细页面. 商品名称四个字拿掉 ===
---------------------------------------------------
25.购物车页面. 商品信息去掉,商品名称列按格式:缩略图+品牌+商品名称+颜色+尺码,第
一列添加商品编码(sku)===

26.购物车页面. 购买过此商品的用户还购买了去掉 ===
27.购物车页面.突出显示去结算按钮,淡化继续购物以及清空购物车按钮 ===
28 .购物车页面. 收货人信息前四项必填项,电话放到手机后面 成为或者的关系 ===
29.购物车页面. 配送方式,送货日期去掉,加上可供选择的普通快递,顺风快递ems(类似
好乐买) ===

30.购物车页面. 去掉发票信息,帮助信息里面有文章提示 ===
31.购物车页面. 订单备注,不用ajax 只用文本框 ===

32.我的订单 订单列表中商品信息以缩略图的形式显示,时间字段移到后面。===

33.查看订单 以TAB的形式显示基本信息,发货信息,财务信息(退货等)。发货信息以列
表的方式显示 ===

34.用户中心 我的收藏去掉 |保留 ===
35.用户中心 退换货放到帮助中心里 退货说明下面加上一个文本框 输入订单号 快递单
号换成发货单号 退款方式只保留 退到洛克商城账号 其他去掉 ===

36.用户中心 我的咨询去掉 |保留===
37.登录,注册页面,客户提交信息后页面跳转到提示页面,然后链接到首页
38.
------------------------------------------------
axure结构要规划一下,
1.把整个网站分成几个基本区域:
a.索引区:首页,二级页面,三级页面
b.商品详细区:商品详情页面
c.购物车区:购物车页面
d.用户中心区:用户中心所有页面
e.帮助中心区
f.登录注册区
g.其他页面区
h.徒步,登山等专题区
i.网站公告区
2. 商品详细页中的评论表单,放到用户中心里面,查看订单页面增加一个tab,评论得内容
以及获得了多少积分
3.分等级 加图标
1.普通会员
2.铁牌会员
3.铜牌会员
4.银牌会员
5.金牌会员
6.钻石会员
7.双钻会员
8.皇冠会员
9.至尊会员
4.使用优惠券,参照ecshop加上下拉式的可选优惠券列表 ===
5.商品详细页 图片的大小固定下来
6.商品状态:添加一个无货状态 ===
7.发货信息里面 商品信息列去掉, 当鼠标滑动到出库单号上面,会弹出商品列表,查看物
流详情,跳转到新的页面 ===
8.隔行变色
9.我的优惠券 使用条件删除
10.我的优惠券 编号改序号
11.实体优惠券 改成实体券激活 请输入优惠券密码:改成请输入实体券密码; 未使用优惠
券 查看已过期优惠券tab 加分页
12.我的积分 添加有效期
13.积分换购 换代金券
14.

交易管理
我的订单
账户余额
我的评价
我的咨询

个人信息
个人资料
修改密码
我的收藏
我的级别
我的积分
我的优惠券

帮助中心
退换货申请 不能反复查询,提交,假如没有登录,提示他登录
退款申请

15.订单中心,近一个月的订单,一个月前的订单
16.收货地址去掉
17.站内消息参考京东,内容页不做单独页面,用ajax
18.首页,焦点尺寸参考阿里妈妈广告位尺寸// 没有合适尺寸,去掉
blueprint
19.专题页面设计思路
类似百度百科的思路,图文结合的方式,图片是相关的图片,文字是相关指导性的文字

20.首页修改

21.首页的缩略图比例:3:4 宽3高4, 商品详细页缩略图正方形,分类页缩略图两种比例:
3:4 正方形两种比例

22.首页左边菜单,宽240px; 高650px; 共10个菜单,5个两行 每个高74px+1px底边,5
个一行 每个高54px+1px底边

相关文档
最新文档