WebApp简单制作

最新推荐文章于 2024-02-27 20:30:11 发布

阳泉

最新推荐文章于 2024-02-27 20:30:11 发布

阅读量3.2k

点赞数 1

分类专栏：前端

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

原址：点击打开链接

WebApp简单制作（后端也可以装逼啦）

阅读目录

回到顶部

前端越来越吃香的感觉

　　年后回来，跟之前和几个同事和朋友聊天，发现有两个.net的和一个php的朋友都转到了前端，真是出乎意料。自从之前的webapp兴起后，前端感觉比后端吃香很多，总结朋友们转的原因，大概就几点

1.易上手，相对其他语言来说，作为后端人员，转到前端，其实已经有了很好的底子和基础了，毕竟以前多少都会和js,jq,html,css打交道

2.前端比后端容易找工作，这里的容易找工作，是指不会被后端的语言限死。就像我朋友说的“做网站不一样需要.net，可以是java，可以是php，但一定离不开js,jq,html,css这些东西”。

3.前端妹子多......

　　其实自己也觉得有一定道理，感觉这两年.net的需求度相对其他的语言都弱了些，前程上搜索发现，.net的职位数是1100+，php是1800+, 前端是2000+，java 是3600+（都是仅限于广州）。所以还是蛮明显的。

　　看到了那么多朋友转前端，自己也开始搞点前端的东西，近期刚好有点时间，正好研究下webapp开发，其实webapp开发说到底就是响应式布局嘛，配合html5+css3就看上去高大上点了。不过作为后端程序猿来说，我还没打算深入去研究html5和css3，反正就是响应式布局，用现成的前端框架来练练手。于是，就想用bootstrap做一个简单的新闻网站来装下逼。

回到顶部

初试

　　Boootstrap，来自 Twitter，是目前很受欢迎的前端框架，主要是响应式布局，无论是文档，资料，还是demo等都比较齐全，而且界面好看，提供多样式主题，还有很多开源的插件和模板，上手相对简单，让后端程序屌丝也能做出好看的界面。

文件的下载和相关引用，可参考如下地址，详细明了

http://v3.bootcss.com/getting-started/

就是下载后只要依次引入：

bootstrap.min.css

bootstrap-theme.min.css

Jquery.min.js

Bootstrap.min.js

这四个文件就好了，然后在<head> 之中添加 viewport 元数据标签，用来指定移动设备优先

viewport

回到顶部

登陆，注册

使用到的组件 panel(面板),navbar(导航条),from(表单) jNotify(提示框)

表单验证，Bootstrap下的表单本身不带验证功能，不过它的插件很多，表单插件bootstrapvalidator就是其中一款，感觉它封装的验证功能比easyui的还要强大。

下载地址: https://github.com/nghuuphuoc/bootstrapvalidator

使用方式,引入 bootstrapValidator.min.css 和 bootstrapValidator.min.js

这两个文件，然后初始化表单

Bootstrapvalidator下载的代码中有大量的demo,可以根据需要自己选择查看。

提示框，jNotify

jNotify是一款提示消息的插件，不过它并不是Bootstrap专有的插件。它提示界面好看，而已又是属于轻量级的，方法使用也简单，下载地址：http://www.jq22.com/jquery-info1377

使用方式，引入 jNotify.jquery.js 和 jNotify.jquery.css

这两个文件，然后就可以直接使用

jError("错误信息提示");

jSuccess("成功信息提示");

jNotify("一般信息提示");

登录页代码

注册页代码

表单验证初始化

JNotify简单封装

效果如下:

回到顶部

新闻列表

使用到的组件 panel(面板),dropdown(下来菜单),Carousel（轮播）glyphicon（图标）栅格布局

顶部菜单代码

尾部菜单代码

轮播代码

新闻列表代码

效果图：

回到顶部

新闻详情和收藏页面

使用到的组件 panel(面板),dropdown(下来菜单),lyphicon（图标）栅格布局

新闻详情页面代码

收藏页面代码

效果图：

回到顶部

造数据

前端基本搭建好了，一个简单的新闻浏览页面就出来了，接着就是让后端有数据出来，怎么办呢，自己写一个后台，提供新闻发布功能，然后自己来造数据？不不不，难得搞定了前端，后端就更要装逼点，直接找个网站偷点数据就好了。于是乎浏览了网易新闻，用谷歌查看了它的请求，发现比想象中的简单很多：

网易网页：

http://3g.163.com

新闻列表的获取地址（地址A）：

http://3g.163.com/touch/article/list/BBM54PGAwangning/0-10.html

http://3g.163.com/touch/article/list/{类型标示}/{页码}-{页数}.html

新闻详情页面的获取地址：

http://3g.163.com/touch/article/BI0GG89900014AED/full.html

http://3g.163.com/touch/article/{地址A中返回的新闻标示}/full.html

哈哈，就是这么简单了，写个控制台跑一下，把新闻标题，图片，内容等信息全部拿下来保存到本地，发送给前端显示就好了，于是就有了下面代码：

  1  public class NewsHelper
  2     {
  3         //获取新闻列表
  4         public static List<NewsItem> GetNews(KeyValuePair<NewTypeEnum, string> newType)
  5         {
  6             string type = newType.Value;
  7             int pageIndex = 0;
  8             int pageSize = 10;
  9             bool isStart = true;
 10             while (isStart)
 11             {
 12                 List<NewsItem> newsInfos = new List<NewsItem>();
 13                 string url = string.Format("http://3g.163.com/touch/article/list/{0}/{1}-{2}.html", type, pageIndex * pageSize, pageSize);
 14                 string result = HttpHelper.Get(url);
 15                 Console.WriteLine(string.Format("{0}  行位置：{1}", type, pageIndex * pageSize));
 16                 if (!string.IsNullOrWhiteSpace(result))
 17                 {
 18                     result = result.Replace("artiList(", "").Trim(')');
 19                     if (!string.IsNullOrWhiteSpace(result))
 20                     {
 21                         var jsonObj = JsonConvert.DeserializeObject<dynamic>(result);
 22                         var newList = jsonObj[type];
 23 
 24                         foreach (var newItem in newList)
 25                         {
 26                             //只获取单图新闻
 27                             if (newItem.hasImg > 0)
 28                             {
 29                                 NewsItem model = new NewsItem()
 30                                 {
 31                                     //新闻标示
 32                                     Docid = newItem.docid,
 33                                     //缩略图url
 34                                     Imgsrc = newItem.imgsrc,
 35                                     //发布时间
 36                                     Ptime = newItem.ptime,
 37                                     //标题
 38                                     Title = newItem.title
 39                                 };
 40                                 newsInfos.Add(model);
 41                                 DownloadImg(model, type);
 42                                 DownDetails(model, type);
 43 
 44                             }
 45                         }
 46                     }
 47                     else
 48                     {
 49                         isStart = false;
 50                     }
 51                 }
 52                 else
 53                 {
 54                     isStart = false;
 55                 }
 56                 SaveDb(newsInfos, newType.Key);
 57                 pageIndex = pageIndex + 1;
 58 
 59             }
 60             Console.WriteLine(type + " get end~~~");
 61             return null;
 62         }
 63 
 64         //将新闻保存到数据库
 65         public static void SaveDb(List<NewsItem> newsItems, NewTypeEnum newTypeEnum)
 66         {
 67             List<NewsInfo> newsInfos = newsItems.Select(p => ConvertNewsInfo(p, newTypeEnum)).ToList();
 68             if (newsInfos.Any())
 69             {
 70                 using (var db = DbHelp.OpenConnection())
 71                 {
 72                     db.InsertAll(newsInfos);
 73                 }
 74                 Console.WriteLine("保存到数据库 {0}", newTypeEnum);
 75             }
 76         }
 77 
 78         #region 辅助方法
 79         //图片下载
 80         private static bool DownloadImg(NewsItem item, string type)
 81         {
 82             var imgUrl = item.Imgsrc;
 83             byte[] imgByes = HttpHelper.HttpGetBytes(imgUrl);
 84 
 85             var path = string.Format("/thumbnail/down/{0}/", type);
 86             var uploadPath = GetFilePath(path);
 87             if (!Directory.Exists(uploadPath))
 88             {
 89                 Directory.CreateDirectory(uploadPath);
 90             }
 91             string fileName = item.Docid + ".jpg";
 92             //创建一个文件流对象，并初始化 
 93             using (FileStream fs = new FileStream(uploadPath + fileName, FileMode.OpenOrCreate))
 94             {
 95                 //向文件流中写入内容
 96                 fs.Write(imgByes, 0, imgByes.Length);
 97             }
 98             item.SaveDbImgsrc = path + fileName;
 99 
100 
101             return true;
102         }
103 
104         //文章下载
105         private static bool DownDetails(NewsItem item, string type)
106         {
107             string url = string.Format("http://3g.163.com/touch/article/{0}/full.html", item.Docid);
108             string result = HttpHelper.Get(url);
109             if (!string.IsNullOrWhiteSpace(result))
110             {
111                 result = result.Replace("artiContent(", "").Trim(')');
112                 if (!string.IsNullOrWhiteSpace(result))
113                 {
114                     var jsonObj = JsonConvert.DeserializeObject<dynamic>(result);
115                     var detail = jsonObj[item.Docid];
116                     //新闻内容
117                     item.Details.Context = detail.body;
118                     //标题
119                     item.Details.Title = detail.title;
120                     //发布时间
121                     item.Details.Ptime = detail.ptime;
122                     //来源
123                     item.Details.Source = detail.source;
124                 }
125             }
126             return true;
127         }
128 
129         private static string GetFilePath(string file)
130         {
131             string dir = System.Configuration.ConfigurationManager.AppSettings["imgSavePath"];
132             var filename = Path.Combine(dir, file.TrimStart('~', '/'));
133             return filename;
134         }
135 
136         static Random rd = new Random();
137 
138         //数据转换
139         private static NewsInfo ConvertNewsInfo(NewsItem item, NewTypeEnum newTypeEnum)
140         {
141             NewsInfo result = new NewsInfo()
142             {
143                 BadCount = rd.Next(0, 100),
144                 CommentsCount = 0,
145                 Context = item.Details.Context,
146                 Imgsrc = item.SaveDbImgsrc,
147                 LikeCount = rd.Next(0, 100),
148                 NewType = (int)newTypeEnum,
149                 Ptime = DateTime.Parse(item.Ptime),
150                 Source = item.Details.Source,
151                 Title = item.Title
152 
153             };
154             return result;
155         }
156         #endregion
157     }

回到顶部

装逼升级

用户是最懒的，你让用户在手机上自己输入一个网站的地址来使用你的webapp，用户会打你的。所以对用户来讲，手机上我想的是一安装，然后打开就能用了。那无非就是搞了app，什么功能都不用，内置一个浏览器，一开到就直接在这个app上面跳到你的网站就好了。就像winfrom里面的webBrowser一样。于是百度了一下，android有WebView 这一控件，可以实现这样功能，虽然不懂安卓，不过这个小功能还是简单的，于是百度WebView 的使用，大致过程如下：

先建一个空白的android项目

在AndroidManifest.xml设置访问网络权限：

View Code

然后修改MainActivity，如下：

View Code

对，就是这么简单（太难的我也不会O(∩_∩)O），然后生成apk安装包，安装后在手机上直接打开后如下：